From 6fd3759cdb0260744ca57dc14db319e245184979 Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Wed, 19 Jun 2024 11:40:11 +0200 Subject: [PATCH 1/9] feat: color mix intro --- .../directives/angular-component-lib/utils.ts | 8 +- .../lib/directives/boolean-value-accessor.ts | 3 +- .../catalyst/src/lib/directives/proxies.ts | 802 +++--------------- .../src/lib/directives/value-accessor.ts | 9 +- core/src/components/cat-alert/cat-alert.scss | 12 +- .../src/components/cat-avatar/cat-avatar.scss | 6 +- core/src/components/cat-badge/cat-badge.scss | 39 +- .../src/components/cat-button/cat-button.scss | 90 +- core/src/components/cat-card/cat-card.scss | 2 +- .../components/cat-checkbox/cat-checkbox.scss | 40 +- .../cat-date-inline/cat-date-inline.scss | 4 +- .../cat-datepicker-inline.scss | 2 +- .../components/cat-dropdown/cat-dropdown.scss | 12 +- .../cat-form-hint/cat-form-hint.scss | 2 +- core/src/components/cat-input/cat-input.scss | 28 +- core/src/components/cat-radio/cat-radio.scss | 22 +- .../src/components/cat-select/cat-select.scss | 36 +- .../components/cat-skeleton/cat-skeleton.scss | 4 +- core/src/components/cat-tabs/cat-tabs.scss | 6 +- .../components/cat-textarea/cat-textarea.scss | 22 +- .../src/components/cat-toggle/cat-toggle.scss | 20 +- .../components/cat-tooltip/cat-tooltip.scss | 12 +- core/src/styles/_snippets/_form-label.scss | 2 +- core/src/styles/_variables.scss | 4 +- core/src/styles/_variables.tokens.scss | 88 -- core/src/styles/core/_base.scss | 6 +- core/src/styles/core/_dialog.scss | 4 +- core/src/styles/core/_notification.scss | 20 +- core/src/styles/core/_typography.scss | 72 +- core/src/styles/fonts/_fonts-mixins.scss | 4 - core/src/styles/fonts/_fonts.mixins.lato.scss | 72 +- core/src/styles/fonts/_fonts.mixins.ss3v.scss | 13 - core/src/styles/utils/_border.mixins.scss | 15 +- core/src/styles/utils/_border.scss | 22 +- core/src/styles/utils/_color.scss | 88 +- core/src/styles/utils/_disabled.mixins.scss | 2 +- core/src/styles/utils/_display.scss | 18 +- core/src/styles/utils/_layout.scss | 10 +- core/src/styles/utils/_media.mixins.scss | 12 +- core/src/styles/utils/_spacing.scss | 86 +- core/src/styles/utils/_typography.mixins.scss | 32 +- core/src/styles/utils/_z-index.mixins.scss | 7 +- core/src/styles/vendor/_flatpickr.scss | 734 ++++++++-------- pnpm-lock.yaml | 13 - tokens/config.js | 94 +- tokens/dist/export/theme.json | 330 ------- tokens/dist/export/zeroheight.json | 178 ---- tokens/package.json | 8 +- tokens/src/assets/font.json | 18 - 49 files changed, 948 insertions(+), 2185 deletions(-) delete mode 100644 core/src/styles/_variables.tokens.scss delete mode 100644 core/src/styles/fonts/_fonts.mixins.ss3v.scss delete mode 100644 tokens/dist/export/theme.json diff --git a/angular/projects/catalyst/src/lib/directives/angular-component-lib/utils.ts b/angular/projects/catalyst/src/lib/directives/angular-component-lib/utils.ts index d573656b9..b75904879 100644 --- a/angular/projects/catalyst/src/lib/directives/angular-component-lib/utils.ts +++ b/angular/projects/catalyst/src/lib/directives/angular-component-lib/utils.ts @@ -4,7 +4,7 @@ import { fromEvent } from 'rxjs'; export const proxyInputs = (Cmp: any, inputs: string[]) => { const Prototype = Cmp.prototype; - inputs.forEach(item => { + inputs.forEach((item) => { Object.defineProperty(Prototype, item, { get() { return this.el[item]; @@ -19,14 +19,14 @@ export const proxyInputs = (Cmp: any, inputs: string[]) => { * we set configurable: true to indicate these * properties can be changed. */ - configurable: true + configurable: true, }); }); }; export const proxyMethods = (Cmp: any, methods: string[]) => { const Prototype = Cmp.prototype; - methods.forEach(methodName => { + methods.forEach((methodName) => { Prototype[methodName] = function () { const args = arguments; return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args)); @@ -35,7 +35,7 @@ export const proxyMethods = (Cmp: any, methods: string[]) => { }; export const proxyOutputs = (instance: any, el: any, events: string[]) => { - events.forEach(eventName => (instance[eventName] = fromEvent(el, eventName))); + events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName))); }; export const defineCustomElement = (tagName: string, customElement: any) => { diff --git a/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts index bdf4057f1..17eb6eda6 100644 --- a/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts +++ b/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts @@ -22,7 +22,6 @@ export class BooleanValueAccessor extends ValueAccessor { super(el); } writeValue(value: any) { - this.el.nativeElement.checked = this.lastValue = - this.el.nativeElement.value == null ? value : this.el.nativeElement.value === value; + this.el.nativeElement.checked = this.lastValue = this.el.nativeElement.value == null ? value : this.el.nativeElement.value === value; } } diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts index ea7133926..753c219bf 100644 --- a/angular/projects/catalyst/src/lib/directives/proxies.ts +++ b/angular/projects/catalyst/src/lib/directives/proxies.ts @@ -6,6 +6,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils'; import { Components } from '@haiilo/catalyst'; + @ProxyCmp({ inputs: ['color', 'icon', 'noIcon'] }) @@ -14,22 +15,20 @@ import { Components } from '@haiilo/catalyst'; changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'icon', 'noIcon'] + inputs: ['color', 'icon', 'noIcon'], }) export class CatAlert { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatAlert extends Components.CatAlert {} + @ProxyCmp({ inputs: ['icon', 'initials', 'label', 'round', 'size', 'src', 'url', 'urlTarget'] }) @@ -38,22 +37,20 @@ export declare interface CatAlert extends Components.CatAlert {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['icon', 'initials', 'label', 'round', 'size', 'src', 'url', 'urlTarget'] + inputs: ['icon', 'initials', 'label', 'round', 'size', 'src', 'url', 'urlTarget'], }) export class CatAvatar { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatAvatar extends Components.CatAvatar {} + @ProxyCmp({ inputs: ['color', 'pulse', 'round', 'size', 'variant'] }) @@ -62,47 +59,22 @@ export declare interface CatAvatar extends Components.CatAvatar {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'pulse', 'round', 'size', 'variant'] + inputs: ['color', 'pulse', 'round', 'size', 'variant'], }) export class CatBadge { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatBadge extends Components.CatBadge {} + @ProxyCmp({ - inputs: [ - 'a11yCurrent', - 'a11yLabel', - 'active', - 'buttonGroupPosition', - 'buttonId', - 'color', - 'disabled', - 'icon', - 'iconOnly', - 'iconRight', - 'loading', - 'name', - 'nativeAttributes', - 'nativeContentAttributes', - 'noEllipsis', - 'round', - 'size', - 'submit', - 'url', - 'urlTarget', - 'value', - 'variant' - ], + inputs: ['a11yCurrent', 'a11yLabel', 'active', 'buttonGroupPosition', 'buttonId', 'color', 'disabled', 'icon', 'iconOnly', 'iconRight', 'loading', 'name', 'nativeAttributes', 'nativeContentAttributes', 'noEllipsis', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant'], methods: ['doFocus', 'doBlur', 'doClick'] }) @Component({ @@ -110,44 +82,18 @@ export declare interface CatBadge extends Components.CatBadge {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'a11yCurrent', - 'a11yLabel', - 'active', - 'buttonGroupPosition', - 'buttonId', - 'color', - 'disabled', - 'icon', - 'iconOnly', - 'iconRight', - 'loading', - 'name', - 'nativeAttributes', - 'nativeContentAttributes', - 'noEllipsis', - 'round', - 'size', - 'submit', - 'url', - 'urlTarget', - 'value', - 'variant' - ] + inputs: ['a11yCurrent', 'a11yLabel', 'active', 'buttonGroupPosition', 'buttonId', 'color', 'disabled', 'icon', 'iconOnly', 'iconRight', 'loading', 'name', 'nativeAttributes', 'nativeContentAttributes', 'noEllipsis', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant'], }) export class CatButton { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catClick', 'catFocus', 'catBlur']); } } + export declare interface CatButton extends Components.CatButton { /** * Emitted when the button is clicked. @@ -163,6 +109,7 @@ export declare interface CatButton extends Components.CatButton { catBlur: EventEmitter>; } + @ProxyCmp({ inputs: ['a11yLabel'] }) @@ -171,43 +118,39 @@ export declare interface CatButton extends Components.CatButton { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel'] + inputs: ['a11yLabel'], }) export class CatButtonGroup { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatButtonGroup extends Components.CatButtonGroup {} -@ProxyCmp({}) + +@ProxyCmp({ +}) @Component({ selector: 'cat-card', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [] + inputs: [], }) export class CatCard { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catLoad']); } } + export declare interface CatCard extends Components.CatCard { /** * Emitted when the card and all the children are fully loaded. @@ -215,23 +158,9 @@ export declare interface CatCard extends Components.CatCard { catLoad: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'checked', - 'disabled', - 'hint', - 'identifier', - 'indeterminate', - 'label', - 'labelHidden', - 'labelLeft', - 'name', - 'nativeAttributes', - 'noValue', - 'required', - 'resolvedValue', - 'value' - ], + inputs: ['checked', 'disabled', 'hint', 'identifier', 'indeterminate', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'noValue', 'required', 'resolvedValue', 'value'], methods: ['doFocus', 'doBlur'] }) @Component({ @@ -239,36 +168,18 @@ export declare interface CatCard extends Components.CatCard { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'checked', - 'disabled', - 'hint', - 'identifier', - 'indeterminate', - 'label', - 'labelHidden', - 'labelLeft', - 'name', - 'nativeAttributes', - 'noValue', - 'required', - 'resolvedValue', - 'value' - ] + inputs: ['checked', 'disabled', 'hint', 'identifier', 'indeterminate', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'noValue', 'required', 'resolvedValue', 'value'], }) export class CatCheckbox { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatCheckbox extends Components.CatCheckbox { /** * Emitted when the checked status of the checkbox is changed. @@ -284,33 +195,9 @@ export declare interface CatCheckbox extends Components.CatCheckbox { catBlur: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'autoComplete', - 'clearable', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'icon', - 'iconRight', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'min', - 'name', - 'nativeAttributes', - 'placeholder', - 'placement', - 'readonly', - 'required', - 'requiredMarker', - 'textPrefix', - 'textSuffix', - 'value' - ], + inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'name', 'nativeAttributes', 'placeholder', 'placement', 'readonly', 'required', 'requiredMarker', 'textPrefix', 'textSuffix', 'value'], methods: ['doFocus', 'doBlur', 'clear'] }) @Component({ @@ -318,46 +205,18 @@ export declare interface CatCheckbox extends Components.CatCheckbox { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'autoComplete', - 'clearable', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'icon', - 'iconRight', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'min', - 'name', - 'nativeAttributes', - 'placeholder', - 'placement', - 'readonly', - 'required', - 'requiredMarker', - 'textPrefix', - 'textSuffix', - 'value' - ] + inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'name', 'nativeAttributes', 'placeholder', 'placement', 'readonly', 'required', 'requiredMarker', 'textPrefix', 'textSuffix', 'value'], }) export class CatDate { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatDate extends Components.CatDate { /** * Emitted when the value is changed. @@ -373,23 +232,9 @@ export declare interface CatDate extends Components.CatDate { catBlur: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'a11yLabel', - 'hint', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'min', - 'noClear', - 'noToday', - 'range', - 'required', - 'requiredMarker', - 'value', - 'weeks' - ], + inputs: ['a11yLabel', 'hint', 'identifier', 'label', 'labelHidden', 'max', 'min', 'noClear', 'noToday', 'range', 'required', 'requiredMarker', 'value', 'weeks'], methods: ['select', 'clear', 'resetView', 'doFocus'] }) @Component({ @@ -397,36 +242,18 @@ export declare interface CatDate extends Components.CatDate { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'a11yLabel', - 'hint', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'min', - 'noClear', - 'noToday', - 'range', - 'required', - 'requiredMarker', - 'value', - 'weeks' - ] + inputs: ['a11yLabel', 'hint', 'identifier', 'label', 'labelHidden', 'max', 'min', 'noClear', 'noToday', 'range', 'required', 'requiredMarker', 'value', 'weeks'], }) export class CatDateInline { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange']); } } + export declare interface CatDateInline extends Components.CatDateInline { /** * Emitted when the value is changed. @@ -434,37 +261,9 @@ export declare interface CatDateInline extends Components.CatDateInline { catChange: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'attachToElement', - 'autoComplete', - 'clearable', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'icon', - 'iconRight', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'min', - 'mode', - 'name', - 'nativeAttributes', - 'nativePickerAttributes', - 'placeholder', - 'position', - 'readonly', - 'required', - 'requiredMarker', - 'step', - 'textPrefix', - 'textSuffix', - 'value' - ], + inputs: ['attachToElement', 'autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'mode', 'name', 'nativeAttributes', 'nativePickerAttributes', 'placeholder', 'position', 'readonly', 'required', 'requiredMarker', 'step', 'textPrefix', 'textSuffix', 'value'], methods: ['doFocus', 'doBlur'] }) @Component({ @@ -472,50 +271,18 @@ export declare interface CatDateInline extends Components.CatDateInline { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'attachToElement', - 'autoComplete', - 'clearable', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'icon', - 'iconRight', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'min', - 'mode', - 'name', - 'nativeAttributes', - 'nativePickerAttributes', - 'placeholder', - 'position', - 'readonly', - 'required', - 'requiredMarker', - 'step', - 'textPrefix', - 'textSuffix', - 'value' - ] + inputs: ['attachToElement', 'autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'mode', 'name', 'nativeAttributes', 'nativePickerAttributes', 'placeholder', 'position', 'readonly', 'required', 'requiredMarker', 'step', 'textPrefix', 'textSuffix', 'value'], }) export class CatDatepicker { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatDatepicker extends Components.CatDatepicker { /** * Emitted when the value is changed. @@ -531,6 +298,7 @@ export declare interface CatDatepicker extends Components.CatDatepicker { catBlur: EventEmitter>; } + @ProxyCmp({ inputs: ['disabled', 'max', 'min', 'mode', 'nativePickerAttributes', 'readonly', 'step', 'value'] }) @@ -539,21 +307,18 @@ export declare interface CatDatepicker extends Components.CatDatepicker { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['disabled', 'max', 'min', 'mode', 'nativePickerAttributes', 'readonly', 'step', 'value'] + inputs: ['disabled', 'max', 'min', 'mode', 'nativePickerAttributes', 'readonly', 'step', 'value'], }) export class CatDatepickerInline { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange']); } } + export declare interface CatDatepickerInline extends Components.CatDatepickerInline { /** * Emitted when the value is changed. @@ -561,6 +326,7 @@ export declare interface CatDatepickerInline extends Components.CatDatepickerInl catChange: EventEmitter>; } + @ProxyCmp({ inputs: ['arrowNavigation', 'noAutoClose', 'noInitialFocus', 'noResize', 'noReturnFocus', 'overflow', 'placement'], methods: ['toggle', 'open', 'close'] @@ -570,21 +336,18 @@ export declare interface CatDatepickerInline extends Components.CatDatepickerInl changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['arrowNavigation', 'noAutoClose', 'noInitialFocus', 'noResize', 'noReturnFocus', 'overflow', 'placement'] + inputs: ['arrowNavigation', 'noAutoClose', 'noInitialFocus', 'noResize', 'noReturnFocus', 'overflow', 'placement'], }) export class CatDropdown { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catOpen', 'catClose']); } } + export declare interface CatDropdown extends Components.CatDropdown { /** * Emitted when the dropdown is opened. @@ -596,6 +359,7 @@ export declare interface CatDropdown extends Components.CatDropdown { catClose: EventEmitter>; } + @ProxyCmp({ inputs: ['horizontal', 'labelSize', 'requiredMarker'] }) @@ -604,22 +368,20 @@ export declare interface CatDropdown extends Components.CatDropdown { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['horizontal', 'labelSize', 'requiredMarker'] + inputs: ['horizontal', 'labelSize', 'requiredMarker'], }) export class CatFormGroup { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatFormGroup extends Components.CatFormGroup {} + @ProxyCmp({ inputs: ['a11yLabel', 'icon', 'iconSrc', 'size'] }) @@ -628,53 +390,22 @@ export declare interface CatFormGroup extends Components.CatFormGroup {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel', 'icon', 'iconSrc', 'size'] + inputs: ['a11yLabel', 'icon', 'iconSrc', 'size'], }) export class CatIcon { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatIcon extends Components.CatIcon {} + @ProxyCmp({ - inputs: [ - 'autoComplete', - 'clearable', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'icon', - 'iconRight', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'maxLength', - 'min', - 'minLength', - 'name', - 'nativeAttributes', - 'placeholder', - 'readonly', - 'required', - 'requiredMarker', - 'round', - 'textPrefix', - 'textSuffix', - 'togglePassword', - 'type', - 'value' - ], + inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'maxLength', 'min', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'round', 'textPrefix', 'textSuffix', 'togglePassword', 'type', 'value'], methods: ['doFocus', 'doBlur', 'clear', 'mask'] }) @Component({ @@ -682,50 +413,18 @@ export declare interface CatIcon extends Components.CatIcon {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'autoComplete', - 'clearable', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'icon', - 'iconRight', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'maxLength', - 'min', - 'minLength', - 'name', - 'nativeAttributes', - 'placeholder', - 'readonly', - 'required', - 'requiredMarker', - 'round', - 'textPrefix', - 'textSuffix', - 'togglePassword', - 'type', - 'value' - ] + inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'maxLength', 'min', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'round', 'textPrefix', 'textSuffix', 'togglePassword', 'type', 'value'], }) export class CatInput { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatInput extends Components.CatInput { /** * Emitted when the value is changed. @@ -741,51 +440,27 @@ export declare interface CatInput extends Components.CatInput { catBlur: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'activePadding', - 'compact', - 'iconNext', - 'iconPrev', - 'page', - 'pageCount', - 'round', - 'sidePadding', - 'size', - 'variant' - ] + inputs: ['activePadding', 'compact', 'iconNext', 'iconPrev', 'page', 'pageCount', 'round', 'sidePadding', 'size', 'variant'] }) @Component({ selector: 'cat-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'activePadding', - 'compact', - 'iconNext', - 'iconPrev', - 'page', - 'pageCount', - 'round', - 'sidePadding', - 'size', - 'variant' - ] + inputs: ['activePadding', 'compact', 'iconNext', 'iconPrev', 'page', 'pageCount', 'round', 'sidePadding', 'size', 'variant'], }) export class CatPagination { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange']); } } + export declare interface CatPagination extends Components.CatPagination { /** * Emitted when the page of the pagination has changed. @@ -793,20 +468,9 @@ export declare interface CatPagination extends Components.CatPagination { catChange: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'checked', - 'disabled', - 'hint', - 'identifier', - 'label', - 'labelHidden', - 'labelLeft', - 'name', - 'nativeAttributes', - 'required', - 'value' - ], + inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value'], methods: ['doFocus', 'doBlur'] }) @Component({ @@ -814,33 +478,18 @@ export declare interface CatPagination extends Components.CatPagination { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'checked', - 'disabled', - 'hint', - 'identifier', - 'label', - 'labelHidden', - 'labelLeft', - 'name', - 'nativeAttributes', - 'required', - 'value' - ] + inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value'], }) export class CatRadio { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatRadio extends Components.CatRadio { /** * Emitted when the radio is changed. @@ -856,6 +505,7 @@ export declare interface CatRadio extends Components.CatRadio { catBlur: EventEmitter>; } + @ProxyCmp({ inputs: ['a11yLabel', 'disabled', 'labelLeft', 'name', 'value'] }) @@ -864,21 +514,18 @@ export declare interface CatRadio extends Components.CatRadio { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel', 'disabled', 'labelLeft', 'name', 'value'] + inputs: ['a11yLabel', 'disabled', 'labelLeft', 'name', 'value'], }) export class CatRadioGroup { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatRadioGroup extends Components.CatRadioGroup { /** * Emitted when the value is changed. @@ -894,6 +541,7 @@ export declare interface CatRadioGroup extends Components.CatRadioGroup { catBlur: EventEmitter>; } + @ProxyCmp({ inputs: ['noOverflowX', 'noOverflowY', 'noOverscroll', 'noScrolledInit', 'noShadowX', 'noShadowY', 'scrolledBuffer'] }) @@ -902,21 +550,18 @@ export declare interface CatRadioGroup extends Components.CatRadioGroup { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['noOverflowX', 'noOverflowY', 'noOverscroll', 'noScrolledInit', 'noShadowX', 'noShadowY', 'scrolledBuffer'] + inputs: ['noOverflowX', 'noOverflowY', 'noOverscroll', 'noScrolledInit', 'noShadowX', 'noShadowY', 'scrolledBuffer'], }) export class CatScrollable { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['scrolledTop', 'scrolledLeft', 'scrolledRight', 'scrolledBottom']); } } + export declare interface CatScrollable extends Components.CatScrollable { /** * Emitted when the content is fully scrolled to the top. @@ -936,30 +581,9 @@ export declare interface CatScrollable extends Components.CatScrollable { scrolledBottom: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'clearable', - 'debounce', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'identifier', - 'label', - 'labelHidden', - 'multiple', - 'name', - 'nativeAttributes', - 'noItems', - 'placeholder', - 'placement', - 'required', - 'requiredMarker', - 'tagHint', - 'tags', - 'value' - ], + inputs: ['clearable', 'debounce', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'identifier', 'label', 'labelHidden', 'multiple', 'name', 'nativeAttributes', 'noItems', 'placeholder', 'placement', 'required', 'requiredMarker', 'tagHint', 'tags', 'value'], methods: ['doFocus', 'doBlur', 'clear', 'connect'] }) @Component({ @@ -967,43 +591,18 @@ export declare interface CatScrollable extends Components.CatScrollable { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'clearable', - 'debounce', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'identifier', - 'label', - 'labelHidden', - 'multiple', - 'name', - 'nativeAttributes', - 'noItems', - 'placeholder', - 'placement', - 'required', - 'requiredMarker', - 'tagHint', - 'tags', - 'value' - ] + inputs: ['clearable', 'debounce', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'identifier', 'label', 'labelHidden', 'multiple', 'name', 'nativeAttributes', 'noItems', 'placeholder', 'placement', 'required', 'requiredMarker', 'tagHint', 'tags', 'value'], }) export class CatSelect { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catOpen', 'catClose', 'catChange', 'catBlur']); } } + export declare interface CatSelect extends Components.CatSelect { /** * Emitted when the select dropdown is opened. @@ -1023,28 +622,28 @@ export declare interface CatSelect extends Components.CatSelect { catBlur: EventEmitter>; } -@ProxyCmp({}) + +@ProxyCmp({ +}) @Component({ selector: 'cat-select-demo', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [] + inputs: [], }) export class CatSelectDemo { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatSelectDemo extends Components.CatSelectDemo {} + @ProxyCmp({ inputs: ['effect', 'lines', 'size', 'variant'] }) @@ -1053,22 +652,20 @@ export declare interface CatSelectDemo extends Components.CatSelectDemo {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['effect', 'lines', 'size', 'variant'] + inputs: ['effect', 'lines', 'size', 'variant'], }) export class CatSkeleton { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatSkeleton extends Components.CatSkeleton {} + @ProxyCmp({ inputs: ['a11yLabel', 'size'] }) @@ -1077,22 +674,20 @@ export declare interface CatSkeleton extends Components.CatSkeleton {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel', 'size'] + inputs: ['a11yLabel', 'size'], }) export class CatSpinner { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatSpinner extends Components.CatSpinner {} + @ProxyCmp({ inputs: ['deactivated', 'error', 'icon', 'iconOnly', 'iconRight', 'label', 'nativeAttributes', 'url', 'urlTarget'] }) @@ -1101,21 +696,18 @@ export declare interface CatSpinner extends Components.CatSpinner {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['deactivated', 'error', 'icon', 'iconOnly', 'iconRight', 'label', 'nativeAttributes', 'url', 'urlTarget'] + inputs: ['deactivated', 'error', 'icon', 'iconOnly', 'iconRight', 'label', 'nativeAttributes', 'url', 'urlTarget'], }) export class CatTab { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catClick']); } } + export declare interface CatTab extends Components.CatTab { /** * Emitted when tab is clicked. @@ -1123,6 +715,7 @@ export declare interface CatTab extends Components.CatTab { catClick: EventEmitter>; } + @ProxyCmp({ inputs: ['activeTab', 'tabsAlign'], methods: ['setActive', 'setActiveIndex'] @@ -1132,21 +725,18 @@ export declare interface CatTab extends Components.CatTab { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['activeTab', 'tabsAlign'] + inputs: ['activeTab', 'tabsAlign'], }) export class CatTabs { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange']); } } + export declare interface CatTabs extends Components.CatTabs { /** * Emitted when active tab is changed. @@ -1154,27 +744,9 @@ export declare interface CatTabs extends Components.CatTabs { catChange: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'identifier', - 'label', - 'labelHidden', - 'maxLength', - 'minLength', - 'name', - 'nativeAttributes', - 'placeholder', - 'readonly', - 'required', - 'requiredMarker', - 'rows', - 'value' - ], + inputs: ['disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'identifier', 'label', 'labelHidden', 'maxLength', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'rows', 'value'], methods: ['doFocus', 'doBlur', 'clear'] }) @Component({ @@ -1182,40 +754,18 @@ export declare interface CatTabs extends Components.CatTabs { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'identifier', - 'label', - 'labelHidden', - 'maxLength', - 'minLength', - 'name', - 'nativeAttributes', - 'placeholder', - 'readonly', - 'required', - 'requiredMarker', - 'rows', - 'value' - ] + inputs: ['disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'identifier', 'label', 'labelHidden', 'maxLength', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'rows', 'value'], }) export class CatTextarea { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatTextarea extends Components.CatTextarea { /** * Emitted when the value is changed. @@ -1231,34 +781,9 @@ export declare interface CatTextarea extends Components.CatTextarea { catBlur: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'autoComplete', - 'clearable', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'icon', - 'iconRight', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'min', - 'name', - 'nativeAttributes', - 'placeholder', - 'placement', - 'readonly', - 'required', - 'requiredMarker', - 'step', - 'textPrefix', - 'textSuffix', - 'value' - ], + inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'name', 'nativeAttributes', 'placeholder', 'placement', 'readonly', 'required', 'requiredMarker', 'step', 'textPrefix', 'textSuffix', 'value'], methods: ['select', 'doFocus', 'doBlur', 'clear'] }) @Component({ @@ -1266,47 +791,18 @@ export declare interface CatTextarea extends Components.CatTextarea { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'autoComplete', - 'clearable', - 'disabled', - 'errorUpdate', - 'errors', - 'hint', - 'horizontal', - 'icon', - 'iconRight', - 'identifier', - 'label', - 'labelHidden', - 'max', - 'min', - 'name', - 'nativeAttributes', - 'placeholder', - 'placement', - 'readonly', - 'required', - 'requiredMarker', - 'step', - 'textPrefix', - 'textSuffix', - 'value' - ] + inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'name', 'nativeAttributes', 'placeholder', 'placement', 'readonly', 'required', 'requiredMarker', 'step', 'textPrefix', 'textSuffix', 'value'], }) export class CatTime { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatTime extends Components.CatTime { /** * Emitted when the value is changed. @@ -1322,22 +818,9 @@ export declare interface CatTime extends Components.CatTime { catBlur: EventEmitter>; } + @ProxyCmp({ - inputs: [ - 'checked', - 'disabled', - 'hint', - 'identifier', - 'label', - 'labelHidden', - 'labelLeft', - 'name', - 'nativeAttributes', - 'noValue', - 'required', - 'resolvedValue', - 'value' - ], + inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'noValue', 'required', 'resolvedValue', 'value'], methods: ['doFocus', 'doBlur'] }) @Component({ @@ -1345,35 +828,18 @@ export declare interface CatTime extends Components.CatTime { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [ - 'checked', - 'disabled', - 'hint', - 'identifier', - 'label', - 'labelHidden', - 'labelLeft', - 'name', - 'nativeAttributes', - 'noValue', - 'required', - 'resolvedValue', - 'value' - ] + inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'noValue', 'required', 'resolvedValue', 'value'], }) export class CatToggle { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } + export declare interface CatToggle extends Components.CatToggle { /** * Emitted when the checked status of the toggle is changed. @@ -1389,6 +855,7 @@ export declare interface CatToggle extends Components.CatToggle { catBlur: EventEmitter>; } + @ProxyCmp({ inputs: ['content', 'disabled', 'hideDelay', 'longTouchDuration', 'placement', 'round', 'showDelay', 'size'] }) @@ -1397,18 +864,17 @@ export declare interface CatToggle extends Components.CatToggle { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['content', 'disabled', 'hideDelay', 'longTouchDuration', 'placement', 'round', 'showDelay', 'size'] + inputs: ['content', 'disabled', 'hideDelay', 'longTouchDuration', 'placement', 'round', 'showDelay', 'size'], }) export class CatTooltip { protected el: HTMLElement; - constructor( - c: ChangeDetectorRef, - r: ElementRef, - protected z: NgZone - ) { + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; } } + export declare interface CatTooltip extends Components.CatTooltip {} + + diff --git a/angular/projects/catalyst/src/lib/directives/value-accessor.ts b/angular/projects/catalyst/src/lib/directives/value-accessor.ts index f67457de0..6bb76a6d3 100644 --- a/angular/projects/catalyst/src/lib/directives/value-accessor.ts +++ b/angular/projects/catalyst/src/lib/directives/value-accessor.ts @@ -3,12 +3,9 @@ import { ControlValueAccessor } from '@angular/forms'; @Directive({}) export class ValueAccessor implements ControlValueAccessor { - private onChange: (value: any) => void = () => { - /**/ - }; - private onTouched: () => void = () => { - /**/ - }; + + private onChange: (value: any) => void = () => {/**/}; + private onTouched: () => void = () => {/**/}; protected lastValue: any; constructor(protected el: ElementRef) {} diff --git a/core/src/components/cat-alert/cat-alert.scss b/core/src/components/cat-alert/cat-alert.scss index 265008dfd..5f5251c43 100644 --- a/core/src/components/cat-alert/cat-alert.scss +++ b/core/src/components/cat-alert/cat-alert.scss @@ -14,7 +14,7 @@ } :host(:focus-visible) { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: 1px; } @@ -31,12 +31,12 @@ @mixin theme($theme) { :host([color='#{$theme}']) { - background-color: cat-token('color.theme.#{$theme}.bg'); - color: cat-token('color.theme.#{$theme}.fill'); + // background-color: cat-token('color.theme.#{$theme}.bg'); + // color: cat-token('color.theme.#{$theme}.fill'); // adjust nested links - --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; - --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)}; - --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)}; + // --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; + // --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)}; + // --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)}; --cat-link-decoration: underline; } } diff --git a/core/src/components/cat-avatar/cat-avatar.scss b/core/src/components/cat-avatar/cat-avatar.scss index 971141611..52000f27e 100644 --- a/core/src/components/cat-avatar/cat-avatar.scss +++ b/core/src/components/cat-avatar/cat-avatar.scss @@ -4,8 +4,8 @@ // ----- -$-background-color: cat-token('color.base.neutral.100'); -$-color: cat-token('color.base.neutral.500'); +$-background-color: red; //$cat-color-base-neutral-100; +$-color: blue; //$cat-color-base-neutral-500; $-sizes: ( 'xl': 3.5rem, 'l': 3rem, @@ -47,7 +47,7 @@ $-sizes: ( @include cat-select(none); &:focus-visible { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: 1px; } } diff --git a/core/src/components/cat-badge/cat-badge.scss b/core/src/components/cat-badge/cat-badge.scss index f18acc587..0a8352605 100644 --- a/core/src/components/cat-badge/cat-badge.scss +++ b/core/src/components/cat-badge/cat-badge.scss @@ -49,26 +49,26 @@ $-paddings: ( // ----- theme -$-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2); +// $-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2); :host([variant='filled']) { - background-color: cat-token-wrap(var(--bg)); - color: cat-token-wrap(var(--fill)); + // background-color: cat-token-wrap(var(--bg)); + // color: cat-token-wrap(var(--fill)); font-weight: 600; @include cat-font-smooth; } :host([variant='outlined']) { - background-color: cat-token('color.ui.background.surface'); - color: cat-token-wrap(var(--text)); - box-shadow: $-outline; + background-color: $cat-color-ui-background-surface; + // color: cat-token-wrap(var(--text)); + // box-shadow: $-outline; } @mixin theme($theme) { :host([color='#{$theme}']) { - --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; - --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; - --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; + // --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; + // --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; + // --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; } } @@ -98,7 +98,8 @@ $-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2); // ----- pulse -$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg)); +// $-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg)); +$-pulse-0: transparent 0 0 0 0.5rem; $-pulse-70: transparent 0 0 0 0.5rem; $-pulse-100: transparent 0 0 0 0; @@ -125,15 +126,15 @@ $-pulse-100: transparent 0 0 0 0; } @keyframes pulse-outlined { - 0% { - box-shadow: $-pulse-0, $-outline; - } + // 0% { + // box-shadow: $-pulse-0, $-outline; + // } - 70% { - box-shadow: $-pulse-70, $-outline; - } + // 70% { + // box-shadow: $-pulse-70, $-outline; + // } - 100% { - box-shadow: $-pulse-100, $-outline; - } + // 100% { + // box-shadow: $-pulse-100, $-outline; + // } } diff --git a/core/src/components/cat-button/cat-button.scss b/core/src/components/cat-button/cat-button.scss index 6c66499b5..00b5df820 100644 --- a/core/src/components/cat-button/cat-button.scss +++ b/core/src/components/cat-button/cat-button.scss @@ -34,13 +34,13 @@ $button-sizes: ( box-sizing: border-box; cursor: pointer; transition: - color cat-token('time.transition.s') linear, - border-color cat-token('time.transition.s') linear, - background-color cat-token('time.transition.s') linear, - box-shadow cat-token('time.transition.s') linear; + color $cat-time-transition-s linear, + border-color $cat-time-transition-s linear, + background-color $cat-time-transition-s linear, + box-shadow $cat-time-transition-s linear; &:focus-visible { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: 1px; } } @@ -116,47 +116,47 @@ $button-sizes: ( // ----- theme .cat-button-filled { - background-color: cat-token-wrap(var(--bg)); - color: cat-token-wrap(var(--fill)); + // background-color: cat-token-wrap(var(--bg)); + // color: cat-token-wrap(var(--fill)); font-weight: var(--cat-font-weight-button, 600); @include cat-font-smooth; &.cat-button-disabled { - --bg: #{cat-token('color.ui.background.muted', $wrap: false)}; - --fill: #{cat-token('color.ui.font.muted', $wrap: false)}; + // --bg: #{cat-token('color.ui.background.muted', $wrap: false)}; + // --fill: #{cat-token('color.ui.font.muted', $wrap: false)}; } } .cat-button-outlined { - background-color: cat-token('color.ui.background.surface'); - box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2); - color: cat-token-wrap(var(--text)); + background-color: $cat-color-ui-background-surface; + // box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2); + // color: cat-token-wrap(var(--text)); &.cat-button-disabled { - --base: #{cat-token('color.ui.font.muted', $wrap: false)}; - --text: #{cat-token('color.ui.font.muted', $wrap: false)}; + // --base: #{cat-token('color.ui.font.muted', $wrap: false)}; + // --text: #{cat-token('color.ui.font.muted', $wrap: false)}; } &:hover:not(.cat-button-disabled):not(.cat-button-loading) { - background-color: cat-token-wrap(var(--base), $alpha: 0.1); + // background-color: cat-token-wrap(var(--base), $alpha: 0.1); } &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) { - background-color: cat-token-wrap(var(--base), $alpha: 0.1); + // background-color: cat-token-wrap(var(--base), $alpha: 0.1); } &:active:not(.cat-button-disabled):not(.cat-button-loading) { - background-color: cat-token-wrap(var(--base), $alpha: 0.1); + // background-color: cat-token-wrap(var(--base), $alpha: 0.1); } } .cat-button-text { background-color: transparent; - color: cat-token-wrap(var(--text)); - text-decoration: cat-token('font.decoration.linkButton'); + // color: cat-token-wrap(var(--text)); + text-decoration: $cat-font-decoration-link-button; &.cat-button-disabled { - --text: #{cat-token('color.ui.font.muted', $wrap: false)}; + // --text: #{cat-token('color.ui.font.muted', $wrap: false)}; } &:hover:not(.cat-button-disabled):not(.cat-button-loading) { @@ -170,44 +170,44 @@ $button-sizes: ( .cat-button-link { background-color: transparent; - color: cat-token-wrap(var(--text)); + // color: cat-token-wrap(var(--text)); &.cat-button-disabled { - --text: #{cat-token('color.ui.font.muted', $wrap: false)}; + // --text: #{cat-token('color.ui.font.muted', $wrap: false)}; } &:hover:not(.cat-button-disabled):not(.cat-button-loading) { - text-decoration: cat-token('font.decoration.linkHover'); + text-decoration: $cat-font-decoration-link-hover; } &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) { - text-decoration: cat-token('font.decoration.linkHover'); + text-decoration: $cat-font-decoration-link-hover; } } @mixin theme($theme) { .cat-button-#{$theme} { - --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; - --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; - --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; - @if $theme == 'secondary' { - --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; - } @else { - --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; - } - - &:hover:not(.cat-button-disabled):not(.cat-button-loading) { - --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)}; - --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)}; - --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)}; - } - - &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading), - &:active:not(.cat-button-disabled):not(.cat-button-loading) { - --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)}; - --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)}; - --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)}; - } + // --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; + // --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; + // --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; + // @if $theme == 'secondary' { + // --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; + // } @else { + // --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; + // } + + // &:hover:not(.cat-button-disabled):not(.cat-button-loading) { + // --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)}; + // --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)}; + // --text: #{cat-token('color.theme.#{$theme}.text-hover', $wrap: false)}; + // } + + // &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading), + // &:active:not(.cat-button-disabled):not(.cat-button-loading) { + // --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)}; + // --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)}; + // --text: #{cat-token('color.theme.#{$theme}.text-active', $wrap: false)}; + // } } } diff --git a/core/src/components/cat-card/cat-card.scss b/core/src/components/cat-card/cat-card.scss index 4876253b4..8e42a8522 100644 --- a/core/src/components/cat-card/cat-card.scss +++ b/core/src/components/cat-card/cat-card.scss @@ -6,7 +6,7 @@ $-padding: 1.25rem; :host { display: block; border-radius: cat-border-radius('l'); - background-color: cat-token('color.ui.background.surface'); + background-color: $cat-color-ui-background-surface; padding: $-padding; } diff --git a/core/src/components/cat-checkbox/cat-checkbox.scss b/core/src/components/cat-checkbox/cat-checkbox.scss index d09bcd118..2ae2f8ce4 100644 --- a/core/src/components/cat-checkbox/cat-checkbox.scss +++ b/core/src/components/cat-checkbox/cat-checkbox.scss @@ -56,12 +56,12 @@ input { position: relative; height: $checkbox-height; width: $checkbox-width; - background-color: cat-token('color.ui.background.input'); - border: 1px solid cat-token('color.ui.border.dark'); + background-color: $cat-color-ui-background-input; + border: 1px solid $cat-color-ui-border-dark; border-radius: cat-border-radius(s); transition: - background-color cat-token('time.transition.s') ease, - border-color cat-token('time.transition.s') ease; + background-color $cat-time-transition-s ease, + border-color $cat-time-transition-s ease; pointer-events: none; box-sizing: border-box; @@ -72,7 +72,7 @@ input { stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; - transition: all cat-token('time.transition.s') ease; + transition: all $cat-time-transition-s ease; width: 50%; position: absolute; top: 50%; @@ -81,9 +81,9 @@ input { } :checked + & { - background-color: cat-token('color.theme.primary.bg'); - border-color: cat-token('color.theme.primary.bg'); - stroke: cat-token('color.theme.primary.fill'); + background-color: $cat-color-theme-primary-bg; + border-color: $cat-color-theme-primary-bg; + stroke: $cat-color-theme-primary-fill; .check { stroke-dashoffset: 0; @@ -91,9 +91,9 @@ input { } :indeterminate + & { - background-color: cat-token('color.theme.primary.bg'); - border-color: cat-token('color.theme.primary.bg'); - stroke: cat-token('color.theme.primary.fill'); + background-color: $cat-color-theme-primary-bg; + border-color: $cat-color-theme-primary-bg; + stroke: $cat-color-theme-primary-fill; .check { stroke-dashoffset: 16px; @@ -105,27 +105,27 @@ input { } :focus-visible + & { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: 1px; } .is-disabled & { - background-color: cat-token('color.ui.background.muted'); - border-color: cat-token('color.ui.border.dark'); - stroke: cat-token('color.ui.font.muted'); + background-color: $cat-color-ui-background-muted; + border-color: $cat-color-ui-border-dark; + stroke: $cat-color-ui-font-muted; } } :host(.cat-error) { .box { - border: 1px solid cat-token('color.theme.danger.bg'); + border: 1px solid $cat-color-theme-danger-bg; } :checked + .box, :indeterminate + .box { - background-color: cat-token('color.theme.danger.bg'); - border-color: cat-token('color.theme.danger.bg'); - stroke: cat-token('color.theme.danger.fill'); + background-color: $cat-color-theme-danger-bg; + border-color: $cat-color-theme-danger-bg; + stroke: $cat-color-theme-danger-fill; } } @@ -140,5 +140,5 @@ input { .is-disabled { cursor: not-allowed; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } diff --git a/core/src/components/cat-date-inline/cat-date-inline.scss b/core/src/components/cat-date-inline/cat-date-inline.scss index 6b699cd1b..28fffb76a 100644 --- a/core/src/components/cat-date-inline/cat-date-inline.scss +++ b/core/src/components/cat-date-inline/cat-date-inline.scss @@ -106,7 +106,7 @@ .picker-grid-head > *, .picker-grid-weeks > * { @include cat-body('xs', 600); - color: cat-token('color.ui.font.muted') !important; + color: $cat-color-ui-font-muted !important; text-decoration: none; } @@ -145,7 +145,7 @@ .cursor-help { margin-block: 0; @include cat-body('xs'); - color: cat-token('color.ui.font.muted') !important; + color: $cat-color-ui-font-muted !important; text-align: center; flex: 1; diff --git a/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss b/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss index af6d08fbd..4aab4cfaa 100644 --- a/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss +++ b/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss @@ -33,7 +33,7 @@ input, .flatpickr-time-separator, .flatpickr-am-pm { - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; opacity: 0.75; } } diff --git a/core/src/components/cat-dropdown/cat-dropdown.scss b/core/src/components/cat-dropdown/cat-dropdown.scss index b03b87506..0d4a322a6 100644 --- a/core/src/components/cat-dropdown/cat-dropdown.scss +++ b/core/src/components/cat-dropdown/cat-dropdown.scss @@ -22,21 +22,21 @@ $-max-height: calc(100vh - 48px); .content { position: fixed; - background: cat-token('color.ui.background.surface'); + background: $cat-color-ui-background-surface; -webkit-overflow-scrolling: touch; min-height: $-min-height; max-height: $-max-height; @include cat-elevation(4); border-radius: cat-border-radius('m'); - border: 1px solid cat-token('color.ui.border.default'); + border: 1px solid $cat-color-ui-border-default; z-index: cat-z-index('dropdown'); // The 3 lines below set the initial styling (when not visible) display: none; opacity: 0; transform: scale(0.9); transition: - transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15), - opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15); + transform $cat-time-transition-s cubic-bezier(0.3, 0, 0.8, 0.15), + opacity $cat-time-transition-s cubic-bezier(0.3, 0, 0.8, 0.15); // Sets the origin point so the scaling transition matches the placement &[data-placement^='top'] { @@ -91,8 +91,8 @@ $-max-height: calc(100vh - 48px); opacity: 1; transform: scale(1); transition: - transform cat-token('time.transition.m') cubic-bezier(0.05, 0.7, 0.1, 1), - opacity cat-token('time.transition.m') cubic-bezier(0.05, 0.7, 0.1, 1); + transform $cat-time-transition-m cubic-bezier(0.05, 0.7, 0.1, 1), + opacity $cat-time-transition-m cubic-bezier(0.05, 0.7, 0.1, 1); } &.overflow-auto { diff --git a/core/src/components/cat-form-hint/cat-form-hint.scss b/core/src/components/cat-form-hint/cat-form-hint.scss index 020e9b031..7f4c708fc 100644 --- a/core/src/components/cat-form-hint/cat-form-hint.scss +++ b/core/src/components/cat-form-hint/cat-form-hint.scss @@ -12,7 +12,7 @@ display: flex; flex-direction: column; gap: 0.25rem; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; @include cat-body('s', null); .input-hint, diff --git a/core/src/components/cat-input/cat-input.scss b/core/src/components/cat-input/cat-input.scss index 1d115f5a9..95c799022 100644 --- a/core/src/components/cat-input/cat-input.scss +++ b/core/src/components/cat-input/cat-input.scss @@ -34,11 +34,11 @@ padding: 0 0.75rem; height: form-label.$cat-input-height; overflow: hidden; - background: cat-token('color.ui.background.input'); + background: $cat-color-ui-background-input; border-radius: cat-border-radius('m'); box-shadow: inset 0 0 0 1px rgb(var(--border-color)); - transition: box-shadow cat-token('time.transition.s') linear; - --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; + transition: box-shadow $cat-time-transition-s linear; + // --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; &.input-round { border-radius: 10rem; @@ -49,9 +49,9 @@ } &.input-disabled { - background: cat-token('color.ui.background.muted'); + background: $cat-color-ui-background-muted; cursor: not-allowed; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } &:not(.input-disabled):hover { @@ -61,7 +61,7 @@ } &:focus-within { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: -1px; &:has(.clearable:focus) { @@ -70,7 +70,7 @@ } &.input-invalid { - --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; + // --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; } /* stylelint-disable property-no-vendor-prefix */ @@ -78,7 +78,7 @@ &, &:hover, &:focus { - background-color: cat-token('color.ui.background.inputAutofill'); + background-color: $cat-color-ui-background-input-autofill; } } /* stylelint-enable property-no-vendor-prefix */ @@ -89,16 +89,16 @@ display: inline-flex; align-items: center; @include cat-select(none); - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } .text-prefix { - border-right: 1px solid cat-token('color.ui.border.dark'); + border-right: 1px solid $cat-color-ui-border-dark; padding-right: 0.75rem; } .text-suffix { - border-left: 1px solid cat-token('color.ui.border.dark'); + border-left: 1px solid $cat-color-ui-border-dark; padding-left: 0.75rem; } @@ -131,7 +131,7 @@ input { .input-disabled & { cursor: not-allowed; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } &.has-clearable, @@ -144,7 +144,7 @@ input { } &::placeholder { - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } /* stylelint-disable property-no-vendor-prefix */ @@ -152,7 +152,7 @@ input { &, &:hover, &:focus { - -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset; + -webkit-box-shadow: 0 0 0 9999px $cat-color-ui-background-input-autofill inset; } } /* stylelint-enable property-no-vendor-prefix */ diff --git a/core/src/components/cat-radio/cat-radio.scss b/core/src/components/cat-radio/cat-radio.scss index 2b9b76550..b3d7275a5 100644 --- a/core/src/components/cat-radio/cat-radio.scss +++ b/core/src/components/cat-radio/cat-radio.scss @@ -41,7 +41,7 @@ label { position: absolute; width: 0.75rem; height: 0.75rem; - background-color: cat-token('color.theme.primary.bg'); + background-color: $cat-color-theme-primary-bg; border-radius: 10rem; top: calc(50% - 0.375rem); left: calc(50% - 0.375rem); @@ -54,13 +54,13 @@ input { width: $radio-width; height: $radio-height; appearance: none; - background-color: cat-token('color.ui.background.input'); - border: 1px solid cat-token('color.ui.border.dark'); + background-color: $cat-color-ui-background-input; + border: 1px solid $cat-color-ui-border-dark; border-radius: 10rem; cursor: inherit; &:checked { - border-color: cat-token('color.theme.primary.bg'); + border-color: $cat-color-theme-primary-bg; + .circle { visibility: visible; @@ -68,18 +68,18 @@ input { } &:focus-visible { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: 1px; } } :host(.cat-error) { input { - border-color: cat-token('color.theme.danger.bg'); + border-color: $cat-color-theme-danger-bg; } .circle { - background-color: cat-token('color.theme.danger.bg'); + background-color: $cat-color-theme-danger-bg; } } @@ -93,17 +93,17 @@ input { .is-disabled { cursor: not-allowed; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; input { - background-color: cat-token('color.ui.background.muted'); + background-color: $cat-color-ui-background-muted; &:checked { - border-color: cat-token('color.ui.border.dark'); + border-color: $cat-color-ui-border-dark; } } .circle { - background-color: cat-token('color.ui.border.dark'); + background-color: $cat-color-ui-border-dark; } } diff --git a/core/src/components/cat-select/cat-select.scss b/core/src/components/cat-select/cat-select.scss index 7234ce924..756e8da31 100644 --- a/core/src/components/cat-select/cat-select.scss +++ b/core/src/components/cat-select/cat-select.scss @@ -40,12 +40,12 @@ label { .select-wrapper { display: flex; align-items: flex-start; - background: cat-token('color.ui.background.input'); + background: $cat-color-ui-background-input; border-radius: cat-border-radius('m'); box-shadow: inset 0 0 0 1px rgb(var(--border-color)); - transition: box-shadow cat-token('time.transition.s') linear; + transition: box-shadow $cat-time-transition-s linear; padding: 0.25rem; - --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; + // --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; &:not(.select-disabled):hover { box-shadow: @@ -54,12 +54,12 @@ label { } &:focus-within { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: -1px; } &.select-invalid { - --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; + // --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; } /* stylelint-disable property-no-vendor-prefix */ @@ -67,7 +67,7 @@ label { &, &:hover, &:focus { - background-color: cat-token('color.ui.background.inputAutofill'); + background-color: $cat-color-ui-background-input-autofill; } } /* stylelint-enable property-no-vendor-prefix */ @@ -75,18 +75,18 @@ label { :host(.cat-error) { .select-wrapper { - box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg'); + box-shadow: 0 0 0 1px $cat-color-theme-danger-bg; &:not(.input-disabled):hover { - box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg'); + box-shadow: 0 0 0 2px $cat-color-theme-danger-bg; } } } .select-disabled { - background: cat-token('color.ui.background.muted'); + background: $cat-color-ui-background-muted; cursor: not-allowed; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; pointer-events: none; } @@ -126,7 +126,7 @@ label { @include cat-ellipsis; &::placeholder { - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } .select-disabled & { @@ -143,7 +143,7 @@ label { align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; - background: cat-token('color.ui.background.muted'); + background: $cat-color-ui-background-muted; border-radius: cat-border-radius('s'); white-space: nowrap; min-width: 0; @@ -161,7 +161,7 @@ label { } .select-btn { - transition: transform cat-token('time.transition.s') linear; + transition: transform $cat-time-transition-s linear; &::part(button) { outline: none; @@ -183,13 +183,13 @@ cat-spinner { .select-dropdown { position: fixed; right: 0; - background: cat-token('color.ui.background.surface'); + background: $cat-color-ui-background-surface; display: none; overflow: auto; // -webkit-overflow-scrolling: touch; @include cat-elevation(4); border-radius: cat-border-radius('m'); - border: 1px solid cat-token('color.ui.border.default'); + border: 1px solid $cat-color-ui-border-default; z-index: cat-z-index('dropdown'); /* Avoid layout interference */ @@ -249,11 +249,11 @@ cat-spinner { } .select-option:hover { - background-color: cat-token('color.theme.secondary.bg', 0.05); + // background-color: cat-token('color.theme.secondary.bg', 0.05); } .select-option-active { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: -2px; } @@ -264,5 +264,5 @@ cat-spinner { .select-option-description { @include cat-ellipsis(2); - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } diff --git a/core/src/components/cat-skeleton/cat-skeleton.scss b/core/src/components/cat-skeleton/cat-skeleton.scss index 4144506d6..85dafb6f9 100644 --- a/core/src/components/cat-skeleton/cat-skeleton.scss +++ b/core/src/components/cat-skeleton/cat-skeleton.scss @@ -20,8 +20,8 @@ $skeleton-sizes: ( flex-direction: column; position: relative; - --background: #{cat-token('color.ui.background.skeleton')}; - --highlight: #{cat-token('color.ui.background.skeletonHighlight')}; + // --background: #{$cat-color-ui-background-skeleton}; + // --highlight: #{$cat-color-ui-background-skeletonHighlight}; --speed: 2s; } diff --git a/core/src/components/cat-tabs/cat-tabs.scss b/core/src/components/cat-tabs/cat-tabs.scss index 427db9bca..5938465ea 100644 --- a/core/src/components/cat-tabs/cat-tabs.scss +++ b/core/src/components/cat-tabs/cat-tabs.scss @@ -4,7 +4,7 @@ :host { display: flex; flex-direction: row; - box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.default'); + box-shadow: inset 0 -1px 0 0 $cat-color-ui-border-default; } :host([hidden]) { @@ -58,11 +58,11 @@ &.cat-tab-active { font-weight: 700; - color: cat-token('color.theme.primary.textActive'); + color: $cat-color-theme-primary-text-active; } &.cat-tab-error { - color: cat-token('color.theme.danger.textActive'); + color: $cat-color-theme-danger-text-active; } &.cat-tab-active::after { diff --git a/core/src/components/cat-textarea/cat-textarea.scss b/core/src/components/cat-textarea/cat-textarea.scss index 2d6a3f700..65823cae5 100644 --- a/core/src/components/cat-textarea/cat-textarea.scss +++ b/core/src/components/cat-textarea/cat-textarea.scss @@ -42,11 +42,11 @@ position: absolute; top: calc(0.625rem - 2px); right: 0.75rem; - background: cat-token('color.ui.background.input', 0.75); + // background: cat-token('color.ui.background.input', 0.75); border-radius: 100rem; .textarea-disabled & { - background: cat-token('color.ui.background.muted', 0.75); + // background: cat-token('color.ui.background.muted', 0.75); } } @@ -56,18 +56,18 @@ textarea { box-sizing: border-box; min-height: form-label.$cat-input-height; font: inherit; - background: cat-token('color.ui.background.input'); + background: $cat-color-ui-background-input; border-radius: cat-border-radius('m'); border: none; box-shadow: inset 0 0 0 1px rgb(var(--border-color)); - transition: box-shadow cat-token('time.transition.s') linear; + transition: box-shadow $cat-time-transition-s linear; resize: vertical; - --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; + // --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; &:disabled { - background: cat-token('color.ui.background.muted'); + background: $cat-color-ui-background-muted; cursor: not-allowed; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; resize: none; } @@ -78,16 +78,16 @@ textarea { } &:focus { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: -1px; } .textarea-invalid & { - --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; + // --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; } &::placeholder { - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } /* stylelint-disable property-no-vendor-prefix */ @@ -95,7 +95,7 @@ textarea { &, &:hover, &:focus { - -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset; + -webkit-box-shadow: 0 0 0 9999px $cat-color-ui-background-input-autofill inset; } } /* stylelint-enable property-no-vendor-prefix */ diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss index 1ba717c43..54046e422 100644 --- a/core/src/components/cat-toggle/cat-toggle.scss +++ b/core/src/components/cat-toggle/cat-toggle.scss @@ -51,16 +51,16 @@ input { width: $toggle-width; height: $toggle-height; border-radius: 10rem; - background-color: cat-token('color.ui.border.dark'); - transition: background-color cat-token('time.transition.s') ease; + background-color: $cat-color-ui-border-dark; + transition: background-color $cat-time-transition-s ease; pointer-events: none; :checked + & { - background-color: cat-token('color.theme.primary.bg'); + background-color: $cat-color-theme-primary-bg; } :focus-visible + & { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; outline-offset: 1px; } @@ -72,17 +72,17 @@ input { background: #fff; border-radius: 10rem; transform: translateX(calc(2px - 0.5rem)); - transition: transform cat-token('time.transition.s') linear; + transition: transform $cat-time-transition-s linear; @include cat-elevation(2); :checked + & { transform: translateX(calc(-2px + 0.5rem)); - background: cat-token('color.theme.primary.fill'); + background: $cat-color-theme-primary-fill; } } .is-disabled & { - background-color: cat-token('color.ui.border.dark'); + background-color: $cat-color-ui-border-dark; } } @@ -92,10 +92,10 @@ input { } :checked + .toggle { - background-color: cat-token('color.theme.danger.bg'); + background-color: $cat-color-theme-danger-bg; &::after { - background: cat-token('color.theme.danger.fill'); + background: $cat-color-theme-danger-fill; } } } @@ -110,5 +110,5 @@ input { .is-disabled { cursor: not-allowed; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } diff --git a/core/src/components/cat-tooltip/cat-tooltip.scss b/core/src/components/cat-tooltip/cat-tooltip.scss index 01c4c9485..ae0b5db09 100644 --- a/core/src/components/cat-tooltip/cat-tooltip.scss +++ b/core/src/components/cat-tooltip/cat-tooltip.scss @@ -14,20 +14,20 @@ $-shift-padding: 0.25rem; // padding given to the shift() middleware } .tooltip { - --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)}; - --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)}; + // --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)}; + // --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)}; position: fixed; width: max-content; top: 0; left: 0; box-sizing: border-box; @include cat-body('s', 500); - background-color: cat-token('color.ui.background.tooltip'); + background-color: $cat-color-ui-background-tooltip; border-radius: cat-border-radius('m'); - color: cat-token('color.ui.font.tooltip'); + color: $cat-color-ui-font-tooltip; transition: - opacity cat-token('time.transition.m') linear, - visibility cat-token('time.transition.m') linear; + opacity $cat-time-transition-m linear, + visibility $cat-time-transition-m linear; visibility: hidden; opacity: 0; box-shadow: $-box-shadow; diff --git a/core/src/styles/_snippets/_form-label.scss b/core/src/styles/_snippets/_form-label.scss index aa29299af..3a82a623e 100644 --- a/core/src/styles/_snippets/_form-label.scss +++ b/core/src/styles/_snippets/_form-label.scss @@ -31,7 +31,7 @@ $cat-input-height: 2.5rem; flex-grow: 1; justify-content: space-between; gap: 0.25rem; - color: cat-token('color.ui.font.muted'); + color: $cat-color-ui-font-muted; } .label-optional, diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss index 43e906264..79dde36cc 100644 --- a/core/src/styles/_variables.scss +++ b/core/src/styles/_variables.scss @@ -1,5 +1,5 @@ -@use 'variables.tokens' as *; -@forward 'variables.tokens'; +@use '~@haiilo/catalyst-tokens/dist/scss/variables' as *; +@forward '~@haiilo/catalyst-tokens/dist/scss/variables'; // -------- // -- Variables diff --git a/core/src/styles/_variables.tokens.scss b/core/src/styles/_variables.tokens.scss deleted file mode 100644 index 0c976216b..000000000 --- a/core/src/styles/_variables.tokens.scss +++ /dev/null @@ -1,88 +0,0 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:color'; -@use 'sass:string'; - -@use '~@haiilo/catalyst-tokens/dist/scss/variables' as *; -@forward '~@haiilo/catalyst-tokens/dist/scss/variables' show $tokens; - -// ----- -// -- Split a string using the given separator. -// ----- -@function -cat-split($string, $separator: ' ') { - $result: (); - $index: string.index($string, $separator); - @while $index != null { - $item: string.slice($string, 1, $index - 1); - $result: list.append($result, $item); - $string: string.slice($string, $index + string.length($separator)); - $index: string.index($string, $separator); - } - $result: list.append($result, $string); - @return $result; -} - -// ----- -// -- Join strings using the given separator. -// ----- -@function -cat-join($strings, $separator: ' ') { - $result: ''; - @each $string in $strings { - $result: $result + $separator + $string; - } - @return string.slice($result, string.length($separator) + 1); -} - -// ----- -// -- Deep map.get using a dot-separated key. -// ----- -@function -cat-get($map, $key) { - $keys: -cat-split('' + $key, '.'); - @each $key in $keys { - @if $map { - $map: map.get($map, $key); - } - } - @return $map; -} - -@function cat-token-wrap($value, $alpha: 1) { - @if meta.type-of($value) == 'string' { - @if meta.type-of($alpha) != 'number' or $alpha < 1 { - @return rgba($value, $alpha); - } @else { - @return rgb($value); - } - } @else if meta.type-of($value) == 'list' { - @return color.adjust( - #00000000, - $red: list.nth($value, 1), - $green: list.nth($value, 2), - $blue: list.nth($value, 3), - $alpha: $alpha - ); - } @else { - @return $value; - } -} - -// ----- -// -- Accessor for $tokens using a dot-separated key. -// -- Automatically wraps RGB partials into an rgb() expression and -// -- optionally adds an RGB alpha value. -// ----- -@function cat-token($key, $alpha: 1, $wrap: true) { - $value: -cat-get($tokens, $key); - @if not $value { - @error 'Unknown token "#{-cat-join($key, '.')}".'; - } - @if string.index($key, 'color.') == 1 { - @if $wrap { - @return cat-token-wrap($value, $alpha); - } @else if meta.type-of($alpha) != 'number' or $alpha < 1 { - @return $value, $alpha; - } - } - @return $value; -} diff --git a/core/src/styles/core/_base.scss b/core/src/styles/core/_base.scss index a284d293c..a9fe042cb 100644 --- a/core/src/styles/core/_base.scss +++ b/core/src/styles/core/_base.scss @@ -3,11 +3,11 @@ html, body { - background-color: cat-token('color.ui.background.canvas'); + background-color: $cat-color-ui-background-canvas; } body { @include cat-body('m'); - font-family: cat-token('font.family.base'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji; - color: cat-token('color.ui.font.base'); + font-family: $cat-font-family-base, $font-fallback-base, $cat-font-family-emoji, $font-fallback-emoji; + color: $cat-color-ui-font-base; } diff --git a/core/src/styles/core/_dialog.scss b/core/src/styles/core/_dialog.scss index 9363d3040..d5d22fbd1 100644 --- a/core/src/styles/core/_dialog.scss +++ b/core/src/styles/core/_dialog.scss @@ -17,13 +17,13 @@ $-dialog-padding: 1.5rem; .cat-backdrop { - background-color: RGB(#{cat-token('color.ui.background.backdrop', cat-token('opacity.backdrop'), $wrap: false)}); + // background-color: RGB(#{cat-token('color.ui.background.backdrop', $cat-opacity-backdrop, $wrap: false)}); } .cat-dialog { display: flex; flex-direction: column; - background-color: cat-token('color.ui.background.surface'); + background-color: $cat-color-ui-background-surface; border-radius: cat-border-radius('l'); @include cat-elevation(7); container: dialog / inline-size; diff --git a/core/src/styles/core/_notification.scss b/core/src/styles/core/_notification.scss index 4556a04da..60f0a5ad7 100644 --- a/core/src/styles/core/_notification.scss +++ b/core/src/styles/core/_notification.scss @@ -4,24 +4,24 @@ .cat-toastify { display: flex; border-radius: cat-border-radius('l'); - background: cat-token('color.ui.background.surface'); + background: $cat-color-ui-background-surface; padding: 1.25rem; box-shadow: none; - color: cat-token('color.ui.font.base'); + color: $cat-color-ui-font-base; width: 400px; max-width: 400px; cursor: unset; @include cat-elevation(4); &.cat-toastify-dark { - --cat-font-color-base: #{cat-token('color.ui.font.baseInverted', $wrap: false)}; - --cat-primary-text: #{cat-token('color.theme.primaryInverted.text', $wrap: false)}; - --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.textHover', $wrap: false)}; - --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.textActive', $wrap: false)}; - --cat-secondary-text: #{cat-token('color.theme.secondaryInverted.text', $wrap: false)}; - --cat-secondary-text-hover: #{cat-token('color.theme.secondaryInverted.textHover', $wrap: false)}; - --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.textActive', $wrap: false)}; - background: cat-token('color.ui.background.surfaceInverted'); + // --cat-font-color-base: #{cat-token('color.ui.font.baseInverted', $wrap: false)}; + // --cat-primary-text: #{cat-token('color.theme.primaryInverted.text', $wrap: false)}; + // --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.text-hover', $wrap: false)}; + // --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.text-active', $wrap: false)}; + // --cat-secondary-text: #{cat-token('color.theme.secondaryInverted.text', $wrap: false)}; + // --cat-secondary-text-hover: #{cat-token('color.theme.secondaryInverted.text-hover', $wrap: false)}; + // --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.text-active', $wrap: false)}; + background: $cat-color-ui-background-surface-inverted; } } diff --git a/core/src/styles/core/_typography.scss b/core/src/styles/core/_typography.scss index 28a03b017..7fa38fa7c 100644 --- a/core/src/styles/core/_typography.scss +++ b/core/src/styles/core/_typography.scss @@ -8,33 +8,33 @@ } // -- head styles -@each $key, $value in cat-token('size.font.head') { - :where(h#{$key}), - .cat-h#{$key} { - @include cat-head($key); - } -} - -// -- body styles -@each $key, $value in cat-token('size.font.body') { - .cat-text-#{$key} { - @include cat-body($key); - } -} - -// -- mono styles -@each $key, $value in cat-token('size.font.mono') { - .cat-mono-#{$key} { - @include cat-mono($key); - } -} +// @each $key, $value in $cat-size-font-head { +// :where(h#{$key}), +// .cat-h#{$key} { +// @include cat-head($key); +// } +// } + +// // -- body styles +// @each $key, $value in $cat-size-font-body { +// .cat-text-#{$key} { +// @include cat-body($key); +// } +// } + +// // -- mono styles +// @each $key, $value in $cat-size-font-mono { +// .cat-mono-#{$key} { +// @include cat-mono($key); +// } +// } hr, .cat-hr { display: block; border: 0; height: 1px; - background-color: cat-token('color.ui.border.default'); + background-color: $cat-color-ui-border-default; overflow: hidden; flex-shrink: 0; } @@ -42,21 +42,21 @@ hr, // ----- links a { - color: cat-token('color.theme.primary.text'); - text-decoration: cat-token('font.decoration.link'); - transition: color cat-token('time.transition.s') linear; + color: $cat-color-theme-primary-text; + text-decoration: $cat-font-decoration-link; + transition: color $cat-time-transition-s linear; &:hover { - color: cat-token('color.theme.primary.textHover'); - text-decoration: cat-token('font.decoration.linkHover'); + color: $cat-color-theme-primary-text-hover; + text-decoration: $cat-font-decoration-link-hover; } &:active { - color: cat-token('color.theme.primary.textActive'); + color: $cat-color-theme-primary-text-active; } &:focus-visible { - outline: 2px solid cat-token('color.ui.border.focus'); + outline: 2px solid $cat-color-ui-border-focus; // outline-offset: -2px; } } @@ -126,8 +126,8 @@ dd:not(:last-child) { blockquote { padding: 0.75rem 0 0.75rem calc(1.5rem - 2px); - border-left: 2px solid cat-token('color.ui.border.quote'); - color: cat-token('color.ui.font.quote'); + border-left: 2px solid $cat-color-ui-border-quote; + color: $cat-color-ui-font-quote; @include cat-body('l', null); font-style: italic; @@ -145,7 +145,7 @@ blockquote { padding-left: 0; padding-right: calc(2rem - 4px); border-left: none; - border-right: 2px solid cat-token('color.ui.border.quote'); + border-right: 2px solid $cat-color-ui-border-quote; } } @@ -180,9 +180,9 @@ pre { kbd, code { margin: 0 0.125rem; - color: cat-token('color.ui.font.muted'); - background: cat-token('color.ui.background.surface'); - box-shadow: 0 0 0 2px cat-token('color.ui.border.default'); + color: $cat-color-ui-font-muted; + background: $cat-color-ui-background-surface; + box-shadow: 0 0 0 2px $cat-color-ui-border-default; border-radius: cat-border-radius('s'); } @@ -210,7 +210,7 @@ code { :where(h1, h2, h3), :is(.cat-h1, .cat-h2, .cat-h3) { color: $cat-font-color-head; - font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji; + font-family: $cat-font-family-head, $font-fallback-base, $cat-font-family-emoji, $font-fallback-emoji; margin-bottom: calc($cat-head-margin-bottom * var(--cat-article-spacer, 1)); &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + .cat-h1, + .cat-h2, + .cat-h3, + .cat-h4, + .cat-h5, + .cat-h6) { @@ -221,7 +221,7 @@ code { :where(h4, h5, h6), :is(.cat-h4, .cat-h5, .cat-h6) { color: $cat-font-color-head; - font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji; + font-family: $cat-font-family-head, $font-fallback-base, $cat-font-family-emoji, $font-fallback-emoji; margin-bottom: calc($cat-head-margin-bottom * 0.5 * var(--cat-article-spacer, 1)); } diff --git a/core/src/styles/fonts/_fonts-mixins.scss b/core/src/styles/fonts/_fonts-mixins.scss index 1a802a553..69a85ac25 100644 --- a/core/src/styles/fonts/_fonts-mixins.scss +++ b/core/src/styles/fonts/_fonts-mixins.scss @@ -1,11 +1,7 @@ @use 'fonts.mixins.lato' as *; -@use 'fonts.mixins.ss3v' as *; @mixin cat-fonts($path) { @include cat-font-lato($path, 300, 400, 500, 600, 700) { font-display: fallback; } - @include cat-font-ss3v($path) { - font-display: fallback; - } } diff --git a/core/src/styles/fonts/_fonts.mixins.lato.scss b/core/src/styles/fonts/_fonts.mixins.lato.scss index 355e25f9f..9c4d04a86 100644 --- a/core/src/styles/fonts/_fonts.mixins.lato.scss +++ b/core/src/styles/fonts/_fonts.mixins.lato.scss @@ -6,8 +6,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Hairline")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffHairline")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-hairline}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-hairline}') format('woff'); font-style: normal; font-weight: 100; text-rendering: optimizeLegibility; @@ -16,8 +16,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2HairlineItalic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffHairlineItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-hairline-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-hairline-italic}') format('woff'); font-style: italic; font-weight: 100; text-rendering: optimizeLegibility; @@ -28,8 +28,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Thin")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffThin")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-thin}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-thin}') format('woff'); font-style: normal; font-weight: 200; text-rendering: optimizeLegibility; @@ -38,8 +38,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2ThinItalic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffThinItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-thin-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-thin-italic}') format('woff'); font-style: italic; font-weight: 200; text-rendering: optimizeLegibility; @@ -50,8 +50,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Light")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffLight")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-light}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-light}') format('woff'); font-style: normal; font-weight: 300; text-rendering: optimizeLegibility; @@ -60,8 +60,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2LightItalic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffLightItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-light-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-light-italic}') format('woff'); font-style: italic; font-weight: 300; text-rendering: optimizeLegibility; @@ -72,8 +72,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Regular")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffRegular")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-regular}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-regular}') format('woff'); font-style: normal; font-weight: 400; text-rendering: optimizeLegibility; @@ -82,8 +82,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Italic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-italic}') format('woff'); font-style: italic; font-weight: 400; text-rendering: optimizeLegibility; @@ -94,8 +94,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Medium")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffMedium")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-medium}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-medium}') format('woff'); font-style: normal; font-weight: 500; text-rendering: optimizeLegibility; @@ -104,8 +104,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2MediumItalic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffMediumItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-medium-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-medium-italic}') format('woff'); font-style: italic; font-weight: 500; text-rendering: optimizeLegibility; @@ -116,8 +116,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Semibold")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffSemibold")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-semibold}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-semibold}') format('woff'); font-style: normal; font-weight: 600; text-rendering: optimizeLegibility; @@ -126,8 +126,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2SemiboldItalic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffSemiboldItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-semibold-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-semibold-italic}') format('woff'); font-style: italic; font-weight: 600; text-rendering: optimizeLegibility; @@ -138,8 +138,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Bold")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffBold")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-bold}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-bold}') format('woff'); font-style: normal; font-weight: 700; text-rendering: optimizeLegibility; @@ -148,8 +148,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2BoldItalic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffBoldItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-bold-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-bold-italic}') format('woff'); font-style: italic; font-weight: 700; text-rendering: optimizeLegibility; @@ -160,8 +160,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Heavy")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffHeavy")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-heavy}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-heavy}') format('woff'); font-style: normal; font-weight: 800; text-rendering: optimizeLegibility; @@ -170,8 +170,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2HeavyItalic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffHeavyItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-heavy-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-heavy-italic}') format('woff'); font-style: italic; font-weight: 800; text-rendering: optimizeLegibility; @@ -182,8 +182,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2Black")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffBlack")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-black}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-black}') format('woff'); font-style: normal; font-weight: 900; text-rendering: optimizeLegibility; @@ -192,8 +192,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{cat-token("asset.font.lato.woff2BlackItalic")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.lato.woffBlackItalic")}') format('woff'); + url('#{$path}/#{$cat-asset-font-lato-woff2-black-italic}') format('woff2'), + url('#{$path}/#{$cat-asset-font-lato-woff-black-italic}') format('woff'); font-style: italic; font-weight: 900; text-rendering: optimizeLegibility; diff --git a/core/src/styles/fonts/_fonts.mixins.ss3v.scss b/core/src/styles/fonts/_fonts.mixins.ss3v.scss deleted file mode 100644 index 8bc86f565..000000000 --- a/core/src/styles/fonts/_fonts.mixins.ss3v.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '../variables' as *; - -@mixin cat-font-ss3v($path) { - @font-face { - font-family: 'Source Sans 3'; - src: - url('#{$path}/#{cat-token("asset.font.ss3v.woff2")}') format('woff2'), - url('#{$path}/#{cat-token("asset.font.ss3v.woff")}') format('woff'); - font-weight: 200 900; - font-style: normal; - @content; - } -} diff --git a/core/src/styles/utils/_border.mixins.scss b/core/src/styles/utils/_border.mixins.scss index 007a8d356..12b050e62 100644 --- a/core/src/styles/utils/_border.mixins.scss +++ b/core/src/styles/utils/_border.mixins.scss @@ -1,11 +1,12 @@ @use '../variables' as *; @function cat-border-radius($size) { - @if $size == '0' or $size == 0 { - @return 0; - } @else if $size == 'full' { - @return 100rem; - } @else { - @return cat-token('size.border.radius.#{$size}'); - } + // @if $size == '0' or $size == 0 { + // @return 0; + // } @else if $size == 'full' { + // @return 100rem; + // } @else { + // @return cat-token('size.border.radius.#{$size}'); + // } + @return 1rem; } diff --git a/core/src/styles/utils/_border.scss b/core/src/styles/utils/_border.scss index 201450361..4197645df 100644 --- a/core/src/styles/utils/_border.scss +++ b/core/src/styles/utils/_border.scss @@ -3,11 +3,11 @@ // ---- Border radius -@each $size, $_def in cat-token('size.border.radius') { - .cat-radius-#{$size} { - border-radius: cat-border-radius($size); - } -} +// @each $size, $_def in $cat-size-border-radius { +// .cat-radius-#{$size} { +// border-radius: cat-border-radius($size); +// } +// } .cat-radius-0 { border-radius: cat-border-radius('0'); @@ -20,29 +20,29 @@ // ---- Border style .cat-border-light { - border: 1px solid cat-token('color.ui.border.light'); + border: 1px solid $cat-color-ui-border-light; } .cat-border { - border: 1px solid cat-token('color.ui.border.default'); + border: 1px solid $cat-color-ui-border-default; } @each $side in top, right, bottom, left { .cat-border-#{$side} { - border-#{$side}: 1px solid cat-token('color.ui.border.default'); + border-#{$side}: 1px solid $cat-color-ui-border-default; &-light { - border-#{$side}: 1px solid cat-token('color.ui.border.light'); + border-#{$side}: 1px solid $cat-color-ui-border-light; } &-dark { - border-#{$side}: 1px solid cat-token('color.ui.border.dark'); + border-#{$side}: 1px solid $cat-color-ui-border-dark; } } } .cat-border-dark { - border: 1px solid cat-token('color.ui.border.dark'); + border: 1px solid $cat-color-ui-border-dark; } .cat-border-none { diff --git a/core/src/styles/utils/_color.scss b/core/src/styles/utils/_color.scss index d01de13e1..6a86d9250 100644 --- a/core/src/styles/utils/_color.scss +++ b/core/src/styles/utils/_color.scss @@ -1,71 +1,71 @@ @use '../variables' as *; -@each $name, $theme in cat-token('color.theme') { - .cat-bg-#{$name} { - background-color: cat-token('color.theme.#{$name}.bg') !important; - color: cat-token('color.theme.#{$name}.fill') !important; - // adjust nested links - --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)}; - --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)}; - --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)}; - --cat-link-decoration: underline; - } +// @each $name, $theme in $cat-color-theme { +// .cat-bg-#{$name} { +// background-color: cat-token('color.theme.#{$name}.bg') !important; +// color: cat-token('color.theme.#{$name}.fill') !important; +// // adjust nested links +// --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)}; +// --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)}; +// --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)}; +// --cat-link-decoration: underline; +// } - .cat-bg-#{$name}-hover { - transition: - background-color cat-token('time.transition.s'), - color cat-token('time.transition.s'); +// .cat-bg-#{$name}-hover { +// transition: +// background-color $cat-time-transition-s, +// color $cat-time-transition-s; - &:hover { - background-color: cat-token('color.theme.#{$name}.bgHover') !important; - color: cat-token('color.theme.#{$name}.fillHover') !important; - // adjust nested links - --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)}; - --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)}; - --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)}; - --cat-link-decoration: underline; - } - } +// &:hover { +// background-color: cat-token('color.theme.#{$name}.bgHover') !important; +// color: cat-token('color.theme.#{$name}.fillHover') !important; +// // adjust nested links +// --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)}; +// --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)}; +// --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)}; +// --cat-link-decoration: underline; +// } +// } - .cat-text-#{$name}, - .cat-link-#{$name} { - color: cat-token('color.theme.#{$name}.text') !important; - } +// .cat-text-#{$name}, +// .cat-link-#{$name} { +// color: cat-token('color.theme.#{$name}.text') !important; +// } - .cat-link-#{$name}, - .cat-text-#{$name}-hover { - transition: color cat-token('time.transition.s'); +// .cat-link-#{$name}, +// .cat-text-#{$name}-hover { +// transition: color $cat-time-transition-s; - &:hover { - color: cat-token('color.theme.#{$name}.textHover') !important; - } +// &:hover { +// color: cat-token('color.theme.#{$name}.text-hover') !important; +// } - &:active { - color: cat-token('color.theme.#{$name}.textActive') !important; - } - } -} +// &:active { +// color: cat-token('color.theme.#{$name}.text-active') !important; +// } +// } +// } // deprecated .cat-active { - color: cat-token('color.theme.primary.text') !important; + color: $cat-color-theme-primary-text !important; } .cat-text-active { - color: cat-token('color.theme.primary.text') !important; + color: $cat-color-theme-primary-text !important; } // deprecated .cat-muted { - color: cat-token('color.ui.font.muted') !important; + color: $cat-color-ui-font-muted !important; } .cat-text-muted { - color: cat-token('color.ui.font.muted') !important; + color: $cat-color-ui-font-muted !important; } .cat-bg-muted { - background-color: cat-token('color.ui.background.muted') !important; + background-color: $cat-color-ui-background-muted !important; } .cat-text-reset { diff --git a/core/src/styles/utils/_disabled.mixins.scss b/core/src/styles/utils/_disabled.mixins.scss index 8d749ca9d..7a1ed82e9 100644 --- a/core/src/styles/utils/_disabled.mixins.scss +++ b/core/src/styles/utils/_disabled.mixins.scss @@ -2,5 +2,5 @@ @mixin cat-disabled() { cursor: not-allowed; - opacity: cat-token('opacity.disabled'); + opacity: $cat-opacity-disabled; } diff --git a/core/src/styles/utils/_display.scss b/core/src/styles/utils/_display.scss index 8a0dab503..6e0e76918 100644 --- a/core/src/styles/utils/_display.scss +++ b/core/src/styles/utils/_display.scss @@ -9,12 +9,12 @@ $-display-props: none, inline, inline-block, block, grid, flex, inline-flex; } } -@each $key, $value in cat-token('size.screen') { - @include from($key) { - @each $prop in $-display-props { - .cat-#{$prop}\:#{$key} { - display: $prop !important; - } - } - } -} +// @each $key, $value in $cat-size-screen { +// @include from($key) { +// @each $prop in $-display-props { +// .cat-#{$prop}\:#{$key} { +// display: $prop !important; +// } +// } +// } +// } diff --git a/core/src/styles/utils/_layout.scss b/core/src/styles/utils/_layout.scss index 28df9502b..d49ba57a7 100644 --- a/core/src/styles/utils/_layout.scss +++ b/core/src/styles/utils/_layout.scss @@ -30,11 +30,11 @@ // -- Gap -@each $size, $value in cat-token('size.spacing') { - @include -layout-property('gap-#{$size}', 'gap', $value); - @include -layout-property('gap-x-#{$size}', 'column-gap', $value); - @include -layout-property('gap-y-#{$size}', 'row-gap', $value); -} +// @each $size, $value in $cat-size-spacing { +// @include -layout-property('gap-#{$size}', 'gap', $value); +// @include -layout-property('gap-x-#{$size}', 'column-gap', $value); +// @include -layout-property('gap-y-#{$size}', 'row-gap', $value); +// } // -- Alignment diff --git a/core/src/styles/utils/_media.mixins.scss b/core/src/styles/utils/_media.mixins.scss index 8c901954d..b2075a8c1 100644 --- a/core/src/styles/utils/_media.mixins.scss +++ b/core/src/styles/utils/_media.mixins.scss @@ -3,15 +3,15 @@ // ---- Responsive @mixin until($size, $media-type: screen) { - @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) { - @content; - } + // @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) { + // @content; + // } } @mixin from($size, $media-type: screen) { - @media #{$media-type} and (min-width: #{cat-token('size.screen.#{$size}')}) { - @content; - } + // @media #{$media-type} and (min-width: #{cat-token('size.screen.#{$size}')}) { + // @content; + // } } // ---- Print diff --git a/core/src/styles/utils/_spacing.scss b/core/src/styles/utils/_spacing.scss index ccd7d1770..336ede074 100644 --- a/core/src/styles/utils/_spacing.scss +++ b/core/src/styles/utils/_spacing.scss @@ -1,48 +1,48 @@ @use 'sass:map'; @use '../variables' as *; -$-spacings: map.merge( - ( - 'auto': auto, - '0': 0 - ), - cat-token('size.spacing') -); +// $-spacings: map.merge( +// ( +// 'auto': auto, +// '0': 0 +// ), +// $cat-size-spacing +// ); -@each $name, $spacing in $-spacings { - .cat-m-#{$name} { - margin: $spacing !important; - } - .cat-mv-#{$name} { - margin-top: $spacing !important; - margin-bottom: $spacing !important; - } - .cat-mh-#{$name} { - margin-left: $spacing !important; - margin-right: $spacing !important; - } - @each $dir in (top, bottom, left, right) { - .cat-m#{str-slice($dir, 0, 1)}-#{$name} { - margin-#{$dir}: $spacing !important; - } - } +// @each $name, $spacing in $-spacings { +// .cat-m-#{$name} { +// margin: $spacing !important; +// } +// .cat-mv-#{$name} { +// margin-top: $spacing !important; +// margin-bottom: $spacing !important; +// } +// .cat-mh-#{$name} { +// margin-left: $spacing !important; +// margin-right: $spacing !important; +// } +// @each $dir in (top, bottom, left, right) { +// .cat-m#{str-slice($dir, 0, 1)}-#{$name} { +// margin-#{$dir}: $spacing !important; +// } +// } - @if $spacing != auto { - .cat-p-#{$name} { - padding: $spacing !important; - } - .cat-pv-#{$name} { - padding-top: $spacing !important; - padding-bottom: $spacing !important; - } - .cat-ph-#{$name} { - padding-left: $spacing !important; - padding-right: $spacing !important; - } - @each $dir in (top, bottom, left, right) { - .cat-p#{str-slice($dir, 0, 1)}-#{$name} { - padding-#{$dir}: $spacing !important; - } - } - } -} +// @if $spacing != auto { +// .cat-p-#{$name} { +// padding: $spacing !important; +// } +// .cat-pv-#{$name} { +// padding-top: $spacing !important; +// padding-bottom: $spacing !important; +// } +// .cat-ph-#{$name} { +// padding-left: $spacing !important; +// padding-right: $spacing !important; +// } +// @each $dir in (top, bottom, left, right) { +// .cat-p#{str-slice($dir, 0, 1)}-#{$name} { +// padding-#{$dir}: $spacing !important; +// } +// } +// } +// } diff --git a/core/src/styles/utils/_typography.mixins.scss b/core/src/styles/utils/_typography.mixins.scss index 3b28f18d5..e2da265d2 100644 --- a/core/src/styles/utils/_typography.mixins.scss +++ b/core/src/styles/utils/_typography.mixins.scss @@ -3,14 +3,16 @@ // ---- Head @function cat-head-font-size($size) { - @return cat-token('size.font.head.#{$size}'); + // @return cat-token('size.font.head.#{$size}'); + @return 1rem; } @function cat-head-line-height($size) { - @return cat-token('size.line.head.#{$size}'); + // @return cat-token('size.line.head.#{$size}'); + @return 1rem; } -@mixin cat-head($size, $weight: cat-token('font.weight.head')) { +@mixin cat-head($size, $weight: $cat-font-weight-head) { // skip color and family, as it is only set for editorial styles font-size: cat-head-font-size($size); line-height: cat-head-line-height($size); @@ -21,14 +23,16 @@ // ---- Body @function cat-body-font-size($size) { - @return cat-token('size.font.body.#{$size}'); -} - -@function cat-body-line-height($size) { - @return cat-token('size.line.body.#{$size}'); + // @return cat-token('size.font.body.#{$size}'); + @return 1rem; + } + + @function cat-body-line-height($size) { + // @return cat-token('size.line.body.#{$size}'); + @return 1rem; } -@mixin cat-body($size, $weight: cat-token('font.weight.body')) { +@mixin cat-body($size, $weight: $cat-font-weight-body) { // skip font family, as it is set on the body // skip color, as it is set on the body font-size: cat-body-font-size($size); @@ -39,18 +43,20 @@ // ---- Mono @function cat-mono-font-family() { - @return cat-token('font.family.mono'), $font-fallback-monospace; + @return $cat-font-family-mono, $font-fallback-monospace; } @function cat-mono-font-size($size) { - @return cat-token('size.font.mono.#{$size}'); + // @return cat-token('size.font.mono.#{$size}'); + @return 1rem; } @function cat-mono-line-height($size) { - @return cat-token('size.line.mono.#{$size}'); + // @return cat-token('size.line.mono.#{$size}'); + @return 1rem; } -@mixin cat-mono($size, $weight: cat-token('font.weight.mono')) { +@mixin cat-mono($size, $weight: $cat-font-weight-mono) { font-family: cat-mono-font-family(); font-size: cat-mono-font-size($size); line-height: cat-mono-line-height($size); diff --git a/core/src/styles/utils/_z-index.mixins.scss b/core/src/styles/utils/_z-index.mixins.scss index 69b67d882..e32c4e852 100644 --- a/core/src/styles/utils/_z-index.mixins.scss +++ b/core/src/styles/utils/_z-index.mixins.scss @@ -1,7 +1,8 @@ @use '../variables' as *; @function cat-z-index($key) { - $base: cat-token('z-index.base'); - $value: cat-token('z-index.' + $key); - @return calc($base + $value); + // $base: cat-token('z-index.base'); + // $value: cat-token('z-index.' + $key); + // @return calc($base + $value); + @return 1; } diff --git a/core/src/styles/vendor/_flatpickr.scss b/core/src/styles/vendor/_flatpickr.scss index ddae9f30f..6e2d44187 100644 --- a/core/src/styles/vendor/_flatpickr.scss +++ b/core/src/styles/vendor/_flatpickr.scss @@ -1,367 +1,367 @@ -@use '../variables' as *; -@use '../mixins' as *; - -/* stylelint-disable selector-class-pattern */ - -.flatpickr-calendar { - @include cat-body(s); - @include cat-elevation(4); - border-radius: cat-border-radius('m'); - border: 1px solid cat-token('color.ui.border.default'); - background: cat-token('color.ui.background.surface'); - padding: 1rem; - - &:not(.inline).animate { - transform: translateY(-1rem); - opacity: 0; - transition: - transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15), - opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15); - } - - &::before, - &::after { - display: none; - } - - &.inline, - &.open { - display: flex; - flex-direction: column; - gap: 1rem; - width: auto !important; - } - - &.inline { - border: unset; - padding: 0; - } - - &.open { - z-index: cat-z-index('dropdown'); - margin-top: 0.75rem; - margin-left: -0.75rem; - - &.animate { - opacity: 1; - transform: translateY(0); - transition: - transform cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1), - opacity cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1); - } - } -} - -.flatpickr-months { - gap: 0.25rem; -} - -.flatpickr-months .flatpickr-month { - height: auto; -} - -.flatpickr-current-month { - @include cat-head(4); - height: 100%; - padding: 0; - display: flex; - position: static; - width: auto; - gap: 0.25rem; - - .flatpickr-monthDropdown-months { - padding: 0 0.25rem; - flex: 1; - margin: unset; - font-weight: inherit; - border-radius: cat-border-radius('m'); - - &:hover, - &:focus-within { - background-color: cat-token('color.theme.primary.bg', 0.05); - } - } - - input.cur-year { - padding: 0; - font-weight: inherit; - line-height: 2.25rem; - } - - .numInputWrapper { - width: 7ch; - } -} - -.flatpickr-months .flatpickr-prev-month, -.flatpickr-months .flatpickr-next-month { - position: static; - width: 2.25rem; - height: 2.25rem; - padding: 0; - align-items: center; - display: flex; - justify-content: center; - color: cat-token('color.ui.font.muted'); - - &:hover { - color: cat-token('color.ui.font.base'); - } -} - -.flatpickr-weekdays { - height: 2rem; - - .flatpickr-weekday { - color: cat-token('color.ui.font.muted'); - @include cat-body(xs, 700); - } -} - -.flatpickr-weekwrapper { - .flatpickr-weekday { - height: 2rem; - } - - .flatpickr-weeks { - box-shadow: none; - width: 2rem; - padding: 0; - margin-right: 0.5rem; - background: cat-token('color.ui.background.muted'); - border-radius: cat-token('size.border.radius.m'); - } - - span.flatpickr-day, - span.flatpickr-day:hover { - @include cat-body(xs, 700); - color: cat-token('color.ui.font.muted'); - text-align: center; - line-height: 2.25rem; - } -} - -.flatpickr-days { - width: 15.75rem !important; -} - -.dayContainer { - width: 15.75rem; - min-width: 15.75rem; - max-width: 15.75rem; -} - -.flatpickr-day { - color: cat-token('color.ui.font.base'); - height: 2.25rem; - line-height: 2.25rem; - border: 0; - border-radius: cat-border-radius('m'); - - &:hover { - background-color: cat-token('color.ui.background.muted'); - font-weight: 700; - } - - &.flatpickr-disabled, - &.flatpickr-disabled:hover { - color: cat-token('color.ui.font.muted'); - font-weight: inherit; - background-color: inherit !important; - } - - &.today { - color: cat-token('color.theme.primary.text'); - box-shadow: inset 0 0 0 2px cat-token('color.theme.primary.text'); - - &:hover, - &:focus { - background-color: cat-token('color.ui.background.muted'); - color: cat-token('color.theme.primary.text'); - } - } - - &.flatpickr-disabled, - &.flatpickr-disabled:hover, - &.prevMonthDay, - &.nextMonthDay, - &.notAllowed, - &.notAllowed.prevMonthDay, - &.notAllowed.nextMonthDay { - color: cat-token('color.ui.font.muted', 0.5); - } - - &.selected, - &.startRange, - &.endRange { - &, - &:hover, - &:focus, - &.inRange, - &.nextMonthDay, - &.prevMonthDay { - font-weight: 700; - background-color: cat-token('color.theme.primary.bg') !important; - color: cat-token('color.theme.primary.fill') !important; - } - } - - &.inRange, - &.prevMonthDay.inRange, - &.nextMonthDay.inRange, - &.today.inRange, - &.prevMonthDay.today.inRange, - &.nextMonthDay.today.inRange, - &:hover, - &.prevMonthDay:hover, - &.nextMonthDay:hover, - &:focus, - &.prevMonthDay:focus, - &.nextMonthDay:focus { - background-color: cat-token('color.theme.primary.bg', 0.1); - } - - &.selected.startRange, - &.startRange.startRange, - &.endRange.startRange { - border-top-left-radius: cat-border-radius('m'); - border-bottom-left-radius: cat-border-radius('m'); - } - - &.selected.endRange, - &.startRange.endRange, - &.endRange.endRange { - border-top-right-radius: cat-border-radius('m'); - border-bottom-right-radius: cat-border-radius('m'); - } -} - -.numInputWrapper { - padding: 0 1rem 0 0.5rem; - border-radius: cat-border-radius('m'); - - &:hover, - &:focus-within { - background-color: cat-token('color.theme.primary.bg', 0.05); - } - - span { - border: none; - background: transparent; - width: 1rem; - padding: 0; - color: cat-token('color.ui.font.muted'); - - &.arrowUp::after { - content: '\2191'; - align-items: flex-end; - } - - &.arrowDown::after { - content: '\2193'; - align-items: flex-start; - } - - &::after { - @include cat-body(xs, 700); - position: static; - border: 0 !important; - font-size: 10px; - display: flex; - height: 100%; - justify-content: center; - } - - &:hover { - color: cat-token('color.ui.font.base'); - background: transparent; - } - } -} - -.flatpickr-calendar.hasTime .flatpickr-time { - border: 1px solid cat-token('color.ui.border.default'); - border-radius: cat-token('size.border.radius.m'); - min-width: 12rem; - height: auto; - - .numInputWrapper { - height: 2rem; - padding: 0; - margin: 0.25rem; - display: flex; - } -} - -.flatpickr-calendar.hasTime.noCalendar { - padding: 0; - - .flatpickr-time { - border: none; - } -} - -.flatpickr-time .flatpickr-time-separator, -.flatpickr-time .flatpickr-am-pm { - margin: 0 0.25rem; - @include cat-head(4, 400); - color: cat-token('color.ui.font.base'); - line-height: 2.25rem; -} - -.flatpickr-time .flatpickr-am-pm { - width: 25%; - padding: 0 0.5rem; - - &:hover, - &:focus { - border-radius: cat-border-radius('m'); - background-color: cat-token('color.theme.primary.bg', 0.05); - } -} - -.flatpickr-time { - max-height: unset; - - input { - background: transparent !important; - color: cat-token('color.ui.font.base'); - font-size: cat-token('size.font.body.m'); - line-height: 2.25rem; - font-family: inherit; - - &.flatpickr-hour { - font-weight: inherit; - } - } -} - -.flatpickr-day.inRange:not(.today), -.flatpickr-day.week.selected { - box-shadow: none; -} - -.flatpickr-day.inRange, -.flatpickr-day.week.selected { - &:nth-child(7n + 1) { - border-top-left-radius: cat-border-radius('m'); - border-bottom-left-radius: cat-border-radius('m'); - } - - &:nth-child(7n + 7) { - border-top-right-radius: cat-border-radius('m'); - border-bottom-right-radius: cat-border-radius('m'); - } -} - -.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), -.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), -.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { - box-shadow: none; -} - -.flatpickr-day.selected.startRange.endRange, -.flatpickr-day.startRange.startRange.endRange, -.flatpickr-day.endRange.startRange.endRange { - border-radius: cat-border-radius('m'); -} +// @use '../variables' as *; +// @use '../mixins' as *; + +// /* stylelint-disable selector-class-pattern */ + +// .flatpickr-calendar { +// @include cat-body(s); +// @include cat-elevation(4); +// border-radius: cat-border-radius('m'); +// border: 1px solid $cat-color-ui-border-default; +// background: $cat-color-ui-background-surface; +// padding: 1rem; + +// &:not(.inline).animate { +// transform: translateY(-1rem); +// opacity: 0; +// transition: +// transform $cat-time-transition-s cubic-bezier(0.3, 0, 0.8, 0.15), +// opacity $cat-time-transition-s cubic-bezier(0.3, 0, 0.8, 0.15); +// } + +// &::before, +// &::after { +// display: none; +// } + +// &.inline, +// &.open { +// display: flex; +// flex-direction: column; +// gap: 1rem; +// width: auto !important; +// } + +// &.inline { +// border: unset; +// padding: 0; +// } + +// &.open { +// z-index: cat-z-index('dropdown'); +// margin-top: 0.75rem; +// margin-left: -0.75rem; + +// &.animate { +// opacity: 1; +// transform: translateY(0); +// transition: +// transform $cat-time-transition-l cubic-bezier(0.05, 0.7, 0.1, 1), +// opacity $cat-time-transition-l cubic-bezier(0.05, 0.7, 0.1, 1); +// } +// } +// } + +// .flatpickr-months { +// gap: 0.25rem; +// } + +// .flatpickr-months .flatpickr-month { +// height: auto; +// } + +// .flatpickr-current-month { +// @include cat-head(4); +// height: 100%; +// padding: 0; +// display: flex; +// position: static; +// width: auto; +// gap: 0.25rem; + +// .flatpickr-monthDropdown-months { +// padding: 0 0.25rem; +// flex: 1; +// margin: unset; +// font-weight: inherit; +// border-radius: cat-border-radius('m'); + +// &:hover, +// &:focus-within { +// background-color: cat-token('color.theme.primary.bg', 0.05); +// } +// } + +// input.cur-year { +// padding: 0; +// font-weight: inherit; +// line-height: 2.25rem; +// } + +// .numInputWrapper { +// width: 7ch; +// } +// } + +// .flatpickr-months .flatpickr-prev-month, +// .flatpickr-months .flatpickr-next-month { +// position: static; +// width: 2.25rem; +// height: 2.25rem; +// padding: 0; +// align-items: center; +// display: flex; +// justify-content: center; +// color: $cat-color-ui-font-muted; + +// &:hover { +// color: $cat-color-ui-font-base; +// } +// } + +// .flatpickr-weekdays { +// height: 2rem; + +// .flatpickr-weekday { +// color: $cat-color-ui-font-muted; +// @include cat-body(xs, 700); +// } +// } + +// .flatpickr-weekwrapper { +// .flatpickr-weekday { +// height: 2rem; +// } + +// .flatpickr-weeks { +// box-shadow: none; +// width: 2rem; +// padding: 0; +// margin-right: 0.5rem; +// background: $cat-color-ui-background-muted; +// border-radius: $cat-size-border-radius-m; +// } + +// span.flatpickr-day, +// span.flatpickr-day:hover { +// @include cat-body(xs, 700); +// color: $cat-color-ui-font-muted; +// text-align: center; +// line-height: 2.25rem; +// } +// } + +// .flatpickr-days { +// width: 15.75rem !important; +// } + +// .dayContainer { +// width: 15.75rem; +// min-width: 15.75rem; +// max-width: 15.75rem; +// } + +// .flatpickr-day { +// color: $cat-color-ui-font-base; +// height: 2.25rem; +// line-height: 2.25rem; +// border: 0; +// border-radius: cat-border-radius('m'); + +// &:hover { +// background-color: $cat-color-ui-background-muted; +// font-weight: 700; +// } + +// &.flatpickr-disabled, +// &.flatpickr-disabled:hover { +// color: $cat-color-ui-font-muted; +// font-weight: inherit; +// background-color: inherit !important; +// } + +// &.today { +// color: $cat-color-theme-primary-text; +// box-shadow: inset 0 0 0 2px $cat-color-theme-primary-text; + +// &:hover, +// &:focus { +// background-color: $cat-color-ui-background-muted; +// color: $cat-color-theme-primary-text; +// } +// } + +// &.flatpickr-disabled, +// &.flatpickr-disabled:hover, +// &.prevMonthDay, +// &.nextMonthDay, +// &.notAllowed, +// &.notAllowed.prevMonthDay, +// &.notAllowed.nextMonthDay { +// color: cat-token('color.ui.font.muted', 0.5); +// } + +// &.selected, +// &.startRange, +// &.endRange { +// &, +// &:hover, +// &:focus, +// &.inRange, +// &.nextMonthDay, +// &.prevMonthDay { +// font-weight: 700; +// background-color: $cat-color-theme-primary-bg !important; +// color: $cat-color-theme-primary-fill !important; +// } +// } + +// &.inRange, +// &.prevMonthDay.inRange, +// &.nextMonthDay.inRange, +// &.today.inRange, +// &.prevMonthDay.today.inRange, +// &.nextMonthDay.today.inRange, +// &:hover, +// &.prevMonthDay:hover, +// &.nextMonthDay:hover, +// &:focus, +// &.prevMonthDay:focus, +// &.nextMonthDay:focus { +// background-color: cat-token('color.theme.primary.bg', 0.1); +// } + +// &.selected.startRange, +// &.startRange.startRange, +// &.endRange.startRange { +// border-top-left-radius: cat-border-radius('m'); +// border-bottom-left-radius: cat-border-radius('m'); +// } + +// &.selected.endRange, +// &.startRange.endRange, +// &.endRange.endRange { +// border-top-right-radius: cat-border-radius('m'); +// border-bottom-right-radius: cat-border-radius('m'); +// } +// } + +// .numInputWrapper { +// padding: 0 1rem 0 0.5rem; +// border-radius: cat-border-radius('m'); + +// &:hover, +// &:focus-within { +// background-color: cat-token('color.theme.primary.bg', 0.05); +// } + +// span { +// border: none; +// background: transparent; +// width: 1rem; +// padding: 0; +// color: $cat-color-ui-font-muted; + +// &.arrowUp::after { +// content: '\2191'; +// align-items: flex-end; +// } + +// &.arrowDown::after { +// content: '\2193'; +// align-items: flex-start; +// } + +// &::after { +// @include cat-body(xs, 700); +// position: static; +// border: 0 !important; +// font-size: 10px; +// display: flex; +// height: 100%; +// justify-content: center; +// } + +// &:hover { +// color: $cat-color-ui-font-base; +// background: transparent; +// } +// } +// } + +// .flatpickr-calendar.hasTime .flatpickr-time { +// border: 1px solid $cat-color-ui-border-default; +// border-radius: $cat-size-border-radius-m; +// min-width: 12rem; +// height: auto; + +// .numInputWrapper { +// height: 2rem; +// padding: 0; +// margin: 0.25rem; +// display: flex; +// } +// } + +// .flatpickr-calendar.hasTime.noCalendar { +// padding: 0; + +// .flatpickr-time { +// border: none; +// } +// } + +// .flatpickr-time .flatpickr-time-separator, +// .flatpickr-time .flatpickr-am-pm { +// margin: 0 0.25rem; +// @include cat-head(4, 400); +// color: $cat-color-ui-font-base; +// line-height: 2.25rem; +// } + +// .flatpickr-time .flatpickr-am-pm { +// width: 25%; +// padding: 0 0.5rem; + +// &:hover, +// &:focus { +// border-radius: cat-border-radius('m'); +// background-color: cat-token('color.theme.primary.bg', 0.05); +// } +// } + +// .flatpickr-time { +// max-height: unset; + +// input { +// background: transparent !important; +// color: $cat-color-ui-font-base; +// font-size: $cat-size-font-body-m; +// line-height: 2.25rem; +// font-family: inherit; + +// &.flatpickr-hour { +// font-weight: inherit; +// } +// } +// } + +// .flatpickr-day.inRange:not(.today), +// .flatpickr-day.week.selected { +// box-shadow: none; +// } + +// .flatpickr-day.inRange, +// .flatpickr-day.week.selected { +// &:nth-child(7n + 1) { +// border-top-left-radius: cat-border-radius('m'); +// border-bottom-left-radius: cat-border-radius('m'); +// } + +// &:nth-child(7n + 7) { +// border-top-right-radius: cat-border-radius('m'); +// border-bottom-right-radius: cat-border-radius('m'); +// } +// } + +// .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), +// .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), +// .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { +// box-shadow: none; +// } + +// .flatpickr-day.selected.startRange.endRange, +// .flatpickr-day.startRange.startRange.endRange, +// .flatpickr-day.endRange.startRange.endRange { +// border-radius: cat-border-radius('m'); +// } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1c4a9c4c..766880c9b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -346,10 +346,6 @@ importers: version: 4.6.4 tokens: - dependencies: - source-sans: - specifier: github:adobe-fonts/source-sans#ed18089 - version: https://codeload.github.com/adobe-fonts/source-sans/tar.gz/ed18089 devDependencies: copyfiles: specifier: 2.4.1 @@ -360,9 +356,6 @@ importers: style-dictionary-utils: specifier: 2.4.1 version: 2.4.1(style-dictionary@3.8.0) - tinycolor2: - specifier: 1.6.0 - version: 1.6.0 packages: @@ -7535,10 +7528,6 @@ packages: resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} engines: {node: '>= 8'} - source-sans@https://codeload.github.com/adobe-fonts/source-sans/tar.gz/ed18089: - resolution: {tarball: https://codeload.github.com/adobe-fonts/source-sans/tar.gz/ed18089} - version: 3.46.0 - sourcemap-codec@1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} deprecated: Please use @jridgewell/sourcemap-codec instead @@ -17663,8 +17652,6 @@ snapshots: source-map@0.7.4: {} - source-sans@https://codeload.github.com/adobe-fonts/source-sans/tar.gz/ed18089: {} - sourcemap-codec@1.4.8: {} spdx-correct@3.2.0: diff --git a/tokens/config.js b/tokens/config.js index 7d4db32ce..a5b9e0e7f 100644 --- a/tokens/config.js +++ b/tokens/config.js @@ -1,10 +1,4 @@ const StyleDictionary = require('style-dictionary-utils'); -const tinycolor = require("tinycolor2"); - -StyleDictionary.registerFileHeader({ - name: 'cat/header', - fileHeader: () => ['Auto-generated file. Do not edit directly.'] -}); StyleDictionary.registerFormat({ name: 'json/designTokens', @@ -17,37 +11,11 @@ StyleDictionary.registerFormat({ }; return obj; } - const tokens = dictionary.allTokens.reduce((acc, token) => - set(acc, token.path, token) - , {}); - return JSON.stringify(tokens, null, 2); - } -}); - -StyleDictionary.registerFormat({ - name: 'json/cssProp', - formatter: function ({ dictionary }) { - const tokens = dictionary.allTokens.reduce((acc, token) => { - acc[token.cssProp] = { - $type: token.$type, - $value: token.value - }; - return acc; - }, {}); + const tokens = dictionary.allTokens.reduce((acc, token) => set(acc, token.path, token), {}); return JSON.stringify(tokens, null, 2); } }); -StyleDictionary.registerTransform({ - type: 'value', - name: 'cat/rgbParts', - matcher: token => token.$type === 'color', - transformer: token => { - var rgb = tinycolor(token.value).toRgb(); - return `${rgb.r}, ${rgb.g}, ${rgb.b}`; - } -}); - StyleDictionary.registerTransform({ type: 'value', name: 'cat/cssProp', @@ -56,6 +24,14 @@ StyleDictionary.registerTransform({ transformer: token => `var(--cat-${token.cssProp}, ${token.value})` }); +StyleDictionary.registerTransform({ + type: 'name', + name: 'cat/scssPrivate', + transitive: true, + matcher: token => token.attributes.category === 'color' && token.attributes.type === 'base', + transformer: token => `-${token.name}` +}); + StyleDictionary.registerTransform({ type: 'value', name: 'cat/jsNumber', @@ -73,62 +49,26 @@ module.exports = { files: [{ destination: 'variables.js', format: "javascript/es6", - options: { - fileHeader: 'cat/header' - } }, { destination: 'variables.d.ts', format: 'typescript/es6-declarations', - options: { - fileHeader: 'cat/header' - } - }] - }, - css: { - transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css', 'cat/rgbParts'], - prefix: 'cat', - buildPath: 'dist/css/', - files: [{ - destination: 'variables.css', - format: 'css/variables', - options: { - fileHeader: 'cat/header', - outputReferences: false - } }] }, scss: { - transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css', 'cat/rgbParts', 'cat/cssProp'], + transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'cat/cssProp', 'cat/scssPrivate'], prefix: 'cat', buildPath: 'dist/scss/', files: [{ destination: '_variables.scss', - format: 'scss/map-deep', + format: 'scss/variables', options: { - fileHeader: 'cat/header', outputReferences: true, themeable: true } }] }, - json: { - transforms: ['name/cti/kebab'], - buildPath: 'dist/json/', - files: [{ - destination: 'variables.json', - format: 'json/nested' - }] - }, - zeroheight: { - transforms: ['name/cti/kebab'], - buildPath: 'dist/export/', - files: [{ - destination: 'zeroheight.json', - format: 'json/designTokens' - }] - }, figma: { - transforms: ['name/cti/kebab', 'dimension/pixelUnitless'], + transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'dimension/pixelUnitless'], buildPath: 'dist/export/', files: [{ destination: 'figma.json', @@ -136,13 +76,13 @@ module.exports = { filter: (token) => token.$type !== 'asset' }] }, - theme: { - transforms: ['name/cti/kebab'], + zeroheight: { + transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex'], buildPath: 'dist/export/', files: [{ - destination: 'theme.json', - format: 'json/cssProp', - filter: (token) => token.hasOwnProperty('cssProp') + destination: 'zeroheight.json', + format: 'json/designTokens', + filter: (token) => token.$type !== 'asset' }] } } diff --git a/tokens/dist/export/theme.json b/tokens/dist/export/theme.json deleted file mode 100644 index 6791ec434..000000000 --- a/tokens/dist/export/theme.json +++ /dev/null @@ -1,330 +0,0 @@ -{ - "primary-bg": { - "$type": "color", - "$value": "#008194" - }, - "primary-bg-hover": { - "$type": "color", - "$value": "#017384" - }, - "primary-bg-active": { - "$type": "color", - "$value": "#026371" - }, - "primary-fill": { - "$type": "color", - "$value": "#ffffff" - }, - "primary-fill-hover": { - "$type": "color", - "$value": "#ffffff" - }, - "primary-fill-active": { - "$type": "color", - "$value": "#ffffff" - }, - "primary-text": { - "$type": "color", - "$value": "#008194" - }, - "primary-text-hover": { - "$type": "color", - "$value": "#017384" - }, - "primary-text-active": { - "$type": "color", - "$value": "#026371" - }, - "secondary-bg": { - "$type": "color", - "$value": "#697687" - }, - "secondary-bg-hover": { - "$type": "color", - "$value": "#697687" - }, - "secondary-bg-active": { - "$type": "color", - "$value": "#697687" - }, - "secondary-fill": { - "$type": "color", - "$value": "#ffffff" - }, - "secondary-fill-hover": { - "$type": "color", - "$value": "#ffffff" - }, - "secondary-fill-active": { - "$type": "color", - "$value": "#ffffff" - }, - "secondary-text": { - "$type": "color", - "$value": "#000000" - }, - "secondary-text-hover": { - "$type": "color", - "$value": "#000000" - }, - "secondary-text-active": { - "$type": "color", - "$value": "#000000" - }, - "info-bg": { - "$type": "color", - "$value": "#0073e6" - }, - "info-bg-hover": { - "$type": "color", - "$value": "#006be3" - }, - "info-bg-active": { - "$type": "color", - "$value": "#0060df" - }, - "info-fill": { - "$type": "color", - "$value": "#ffffff" - }, - "info-fill-hover": { - "$type": "color", - "$value": "#ffffff" - }, - "info-fill-active": { - "$type": "color", - "$value": "#ffffff" - }, - "info-text": { - "$type": "color", - "$value": "#0073e6" - }, - "info-text-hover": { - "$type": "color", - "$value": "#006be3" - }, - "info-text-active": { - "$type": "color", - "$value": "#0060df" - }, - "success-bg": { - "$type": "color", - "$value": "#008458" - }, - "success-bg-hover": { - "$type": "color", - "$value": "#00754e" - }, - "success-bg-active": { - "$type": "color", - "$value": "#006946" - }, - "success-fill": { - "$type": "color", - "$value": "#ffffff" - }, - "success-fill-hover": { - "$type": "color", - "$value": "#ffffff" - }, - "success-fill-active": { - "$type": "color", - "$value": "#ffffff" - }, - "success-text": { - "$type": "color", - "$value": "#008458" - }, - "success-text-hover": { - "$type": "color", - "$value": "#00754e" - }, - "success-text-active": { - "$type": "color", - "$value": "#006946" - }, - "warning-bg": { - "$type": "color", - "$value": "#ffce80" - }, - "warning-bg-hover": { - "$type": "color", - "$value": "#ffd694" - }, - "warning-bg-active": { - "$type": "color", - "$value": "#ffdea8" - }, - "warning-fill": { - "$type": "color", - "$value": "#000000" - }, - "warning-fill-hover": { - "$type": "color", - "$value": "#000000" - }, - "warning-fill-active": { - "$type": "color", - "$value": "#000000" - }, - "warning-text": { - "$type": "color", - "$value": "#9f6100" - }, - "warning-text-hover": { - "$type": "color", - "$value": "#9f6100" - }, - "warning-text-active": { - "$type": "color", - "$value": "#9f6100" - }, - "danger-bg": { - "$type": "color", - "$value": "#d9340d" - }, - "danger-bg-hover": { - "$type": "color", - "$value": "#c22e0b" - }, - "danger-bg-active": { - "$type": "color", - "$value": "#ae2a0a" - }, - "danger-fill": { - "$type": "color", - "$value": "#ffffff" - }, - "danger-fill-hover": { - "$type": "color", - "$value": "#ffffff" - }, - "danger-fill-active": { - "$type": "color", - "$value": "#ffffff" - }, - "danger-text": { - "$type": "color", - "$value": "#d9340d" - }, - "danger-text-hover": { - "$type": "color", - "$value": "#c22e0b" - }, - "danger-text-active": { - "$type": "color", - "$value": "#ae2a0a" - }, - "bg": { - "$type": "color", - "$value": "#f2f4f7" - }, - "bg-tooltip": { - "$type": "color", - "$value": "#000000" - }, - "bg-backdrop": { - "$type": "color", - "$value": "#1b1f26" - }, - "border-color-light": { - "$type": "color", - "$value": "#f2f4f7" - }, - "border-color": { - "$type": "color", - "$value": "#ebecf0" - }, - "border-color-dark": { - "$type": "color", - "$value": "#d7dbe0" - }, - "border-color-focus": { - "$type": "color", - "$value": "#0071ff" - }, - "font-color-base": { - "$type": "color", - "$value": "#000000" - }, - "font-color-muted": { - "$type": "color", - "$value": "#515c6c" - }, - "font-color-quote": { - "$type": "color", - "$value": "#515c6c" - }, - "font-color-tooltip": { - "$type": "color", - "$value": "#ffffff" - }, - "font-family-base": { - "$type": "fontFamily", - "$value": "Lato" - }, - "font-family-mono": { - "$type": "fontFamily", - "$value": "''" - }, - "font-family-emoji": { - "$type": "fontFamily", - "$value": "''" - }, - "font-weight-head": { - "$type": "fontWeight", - "$value": 600 - }, - "font-weight-body": { - "$type": "fontWeight", - "$value": 400 - }, - "font-weight-mono": { - "$type": "fontWeight", - "$value": 400 - }, - "link-decoration": { - "$type": "fontDecoration", - "$value": "none" - }, - "link-decoration-hover": { - "$type": "fontDecoration", - "$value": "underline" - }, - "link-button-decoration": { - "$type": "fontDecoration", - "$value": "none" - }, - "link-button-decoration-hover": { - "$type": "fontDecoration", - "$value": "none" - }, - "opacity-disabled": { - "$type": "opacity", - "$value": 0.65 - }, - "opacity-backdrop": { - "$type": "opacity", - "$value": 0.4 - }, - "opacity-tooltip": { - "$type": "opacity", - "$value": 1 - }, - "border-radius-l": { - "$type": "dimension", - "$value": "0.5rem" - }, - "border-radius-m": { - "$type": "dimension", - "$value": "0.25rem" - }, - "border-radius-s": { - "$type": "dimension", - "$value": "0.125rem" - }, - "z-index": { - "$type": "number", - "$value": 1000 - } -} \ No newline at end of file diff --git a/tokens/dist/export/zeroheight.json b/tokens/dist/export/zeroheight.json index 7b903864d..a9162c1d1 100644 --- a/tokens/dist/export/zeroheight.json +++ b/tokens/dist/export/zeroheight.json @@ -1,182 +1,4 @@ { - "asset": { - "font": { - "lato": { - "name": { - "$type": "asset", - "$value": "Lato" - }, - "woffBlack": { - "$type": "asset", - "$value": "Lato-Black.woff" - }, - "woff2Black": { - "$type": "asset", - "$value": "Lato-Black.woff2" - }, - "woffBlackItalic": { - "$type": "asset", - "$value": "Lato-BlackItalic.woff" - }, - "woff2BlackItalic": { - "$type": "asset", - "$value": "Lato-BlackItalic.woff2" - }, - "woffBold": { - "$type": "asset", - "$value": "Lato-Bold.woff" - }, - "woff2Bold": { - "$type": "asset", - "$value": "Lato-Bold.woff2" - }, - "woffBoldItalic": { - "$type": "asset", - "$value": "Lato-BoldItalic.woff" - }, - "woff2BoldItalic": { - "$type": "asset", - "$value": "Lato-BoldItalic.woff2" - }, - "woffHairline": { - "$type": "asset", - "$value": "Lato-Hairline.woff" - }, - "woff2Hairline": { - "$type": "asset", - "$value": "Lato-Hairline.woff2" - }, - "woffHairlineItalic": { - "$type": "asset", - "$value": "Lato-HairlineItalic.woff" - }, - "woff2HairlineItalic": { - "$type": "asset", - "$value": "Lato-HairlineItalic.woff2" - }, - "woffHeavy": { - "$type": "asset", - "$value": "Lato-Heavy.woff" - }, - "woff2Heavy": { - "$type": "asset", - "$value": "Lato-Heavy.woff2" - }, - "woffHeavyItalic": { - "$type": "asset", - "$value": "Lato-HeavyItalic.woff" - }, - "woff2HeavyItalic": { - "$type": "asset", - "$value": "Lato-HeavyItalic.woff2" - }, - "woffItalic": { - "$type": "asset", - "$value": "Lato-Italic.woff" - }, - "woff2Italic": { - "$type": "asset", - "$value": "Lato-Italic.woff2" - }, - "woffLight": { - "$type": "asset", - "$value": "Lato-Light.woff" - }, - "woff2Light": { - "$type": "asset", - "$value": "Lato-Light.woff2" - }, - "woffLightItalic": { - "$type": "asset", - "$value": "Lato-LightItalic.woff" - }, - "woff2LightItalic": { - "$type": "asset", - "$value": "Lato-LightItalic.woff2" - }, - "woffMedium": { - "$type": "asset", - "$value": "Lato-Medium.woff" - }, - "woff2Medium": { - "$type": "asset", - "$value": "Lato-Medium.woff2" - }, - "woffMediumItalic": { - "$type": "asset", - "$value": "Lato-MediumItalic.woff" - }, - "woff2MediumItalic": { - "$type": "asset", - "$value": "Lato-MediumItalic.woff2" - }, - "woffRegular": { - "$type": "asset", - "$value": "Lato-Regular.woff" - }, - "woff2Regular": { - "$type": "asset", - "$value": "Lato-Regular.woff2" - }, - "woffSemibold": { - "$type": "asset", - "$value": "Lato-Semibold.woff" - }, - "woff2Semibold": { - "$type": "asset", - "$value": "Lato-Semibold.woff2" - }, - "woffSemiboldItalic": { - "$type": "asset", - "$value": "Lato-SemiboldItalic.woff" - }, - "woff2SemiboldItalic": { - "$type": "asset", - "$value": "Lato-SemiboldItalic.woff2" - }, - "woffThin": { - "$type": "asset", - "$value": "Lato-Thin.woff" - }, - "woff2Thin": { - "$type": "asset", - "$value": "Lato-Thin.woff2" - }, - "woffThinItalic": { - "$type": "asset", - "$value": "Lato-ThinItalic.woff" - }, - "woff2ThinItalic": { - "$type": "asset", - "$value": "Lato-ThinItalic.woff2" - } - }, - "azeretMono": { - "name": { - "$type": "asset", - "$value": "Azeret Mono" - }, - "woff2Regular": { - "$type": "asset", - "$value": "AzeretMono-Regular.woff2" - } - }, - "ss3v": { - "name": { - "$type": "asset", - "$value": "Source Sans 3" - }, - "woff": { - "$type": "asset", - "$value": "SourceSans3VF-Upright.ttf.woff" - }, - "woff2": { - "$type": "asset", - "$value": "SourceSans3VF-Upright.ttf.woff2" - } - } - } - }, "color": { "base": { "white": { diff --git a/tokens/package.json b/tokens/package.json index be4cb9dd9..328bbd93e 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -19,17 +19,13 @@ "scripts": { "prebuild": "pnpm run clean", "build": "style-dictionary build --config config.js", - "postbuild": "copyfiles -f assets/fonts/* node_modules/source-sans/WOFF*/VF/* dist/assets/fonts", + "postbuild": "copyfiles -f assets/fonts/* dist/assets/fonts", "clean": "rm -rf ./dist", "reset": "rm -rf ./dist ./node_modules" }, - "dependencies": { - "source-sans": "github:adobe-fonts/source-sans#ed18089" - }, "devDependencies": { "copyfiles": "2.4.1", "style-dictionary": "3.8.0", - "style-dictionary-utils": "2.4.1", - "tinycolor2": "1.6.0" + "style-dictionary-utils": "2.4.1" } } diff --git a/tokens/src/assets/font.json b/tokens/src/assets/font.json index 8e2fc63c3..62de0ca1d 100644 --- a/tokens/src/assets/font.json +++ b/tokens/src/assets/font.json @@ -87,24 +87,6 @@ "$type": "asset", "$value": "Lato-ThinItalic.woff2" } - }, - "azeretMono": { - "name": { "$type": "asset", "$value": "Azeret Mono" }, - "woff2Regular": { - "$type": "asset", - "$value": "AzeretMono-Regular.woff2" - } - }, - "ss3v": { - "name": { "$type": "asset", "$value": "Source Sans 3" }, - "woff": { - "$type": "asset", - "$value": "SourceSans3VF-Upright.ttf.woff" - }, - "woff2": { - "$type": "asset", - "$value": "SourceSans3VF-Upright.ttf.woff2" - } } } } From 4ab45f1c52352a9eed34c2179506221adc5f93b5 Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Wed, 14 Aug 2024 23:42:48 +0200 Subject: [PATCH 2/9] chore: interim state --- .../src/lib/dialog/dialog.component.scss | 2 +- .../lib/directives/boolean-value-accessor.ts | 2 +- core/src/components/cat-alert/cat-alert.scss | 12 ++++---- .../src/components/cat-toggle/cat-toggle.scss | 2 +- core/src/styles/_variables.scss | 29 ++++++++++++++++++- core/src/styles/utils/_border.mixins.scss | 15 +++++----- tokens/config.js | 28 +++++++++--------- 7 files changed, 58 insertions(+), 32 deletions(-) diff --git a/angular/projects/catalyst/src/lib/dialog/dialog.component.scss b/angular/projects/catalyst/src/lib/dialog/dialog.component.scss index ddccd2eab..1bfc982ea 100644 --- a/angular/projects/catalyst/src/lib/dialog/dialog.component.scss +++ b/angular/projects/catalyst/src/lib/dialog/dialog.component.scss @@ -5,7 +5,7 @@ @include cdk.overlay(); .cat-backdrop { - transition-duration: cat-token('time.transition.l'); + //transition-duration: cat-token('time.transition.l'); } .cat-dialog-pane { diff --git a/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts index 17eb6eda6..e516792c0 100644 --- a/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts +++ b/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts @@ -22,6 +22,6 @@ export class BooleanValueAccessor extends ValueAccessor { super(el); } writeValue(value: any) { - this.el.nativeElement.checked = this.lastValue = this.el.nativeElement.value == null ? value : this.el.nativeElement.value === value; + this.el.nativeElement.checked = this.lastValue = value == null ? false : value; } } diff --git a/core/src/components/cat-alert/cat-alert.scss b/core/src/components/cat-alert/cat-alert.scss index 5f5251c43..10d597519 100644 --- a/core/src/components/cat-alert/cat-alert.scss +++ b/core/src/components/cat-alert/cat-alert.scss @@ -14,7 +14,7 @@ } :host(:focus-visible) { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: 1px; } @@ -31,12 +31,12 @@ @mixin theme($theme) { :host([color='#{$theme}']) { - // background-color: cat-token('color.theme.#{$theme}.bg'); - // color: cat-token('color.theme.#{$theme}.fill'); + background-color: cat-token('color.theme.#{$theme}.bg'); + color: cat-token('color.theme.#{$theme}.fill'); // adjust nested links - // --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; - // --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)}; - // --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)}; + --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill')}; + --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover')}; + --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive')}; --cat-link-decoration: underline; } } diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss index 54046e422..b31523638 100644 --- a/core/src/components/cat-toggle/cat-toggle.scss +++ b/core/src/components/cat-toggle/cat-toggle.scss @@ -88,7 +88,7 @@ input { :host(.cat-error) { .toggle { - background-color: cat-token('color.theme.danger.bg', 0.2); + //background-color: cat-token('color.theme.danger.bg', 0.2); } :checked + .toggle { diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss index 79dde36cc..948e81a7d 100644 --- a/core/src/styles/_variables.scss +++ b/core/src/styles/_variables.scss @@ -1,6 +1,33 @@ +@use 'sass:map'; +@use 'sass:string'; +@use 'sass:list'; @use '~@haiilo/catalyst-tokens/dist/scss/variables' as *; @forward '~@haiilo/catalyst-tokens/dist/scss/variables'; +@function -map-get($map, $keys...) { + @each $key in $keys { + $map: map.get($map, $key); + } + @return $map; +} + +@function -split($string, $separator: ' ') { + $result: (); + $index: string.index($string, $separator); + @while $index != null { + $item: string.slice($string, 1, $index - 1); + $result: list.append($result, $item); + $string: string.slice($string, $index + string.length($separator)); + $index: string.index($string, $separator); + } + $result: list.append($result, $string); + @return $result; +} + +@function cat-token($key) { + @return -map-get($tokens, -split($key, '.')...); +} + // -------- // -- Variables // These variables are not part of the design tokens, as they do not have a @@ -25,7 +52,7 @@ $cat-nav-padding-horizontal: 0.75rem; // -- Typography // -------- -$cat-mark-color: cat-token('color.theme.primary.bg', 0.2); +$cat-mark-color: red; //cat-token('color.theme.primary.bg', 0.2); /* stylelint-disable value-keyword-case */ $font-fallback-base: system-ui, diff --git a/core/src/styles/utils/_border.mixins.scss b/core/src/styles/utils/_border.mixins.scss index 12b050e62..007a8d356 100644 --- a/core/src/styles/utils/_border.mixins.scss +++ b/core/src/styles/utils/_border.mixins.scss @@ -1,12 +1,11 @@ @use '../variables' as *; @function cat-border-radius($size) { - // @if $size == '0' or $size == 0 { - // @return 0; - // } @else if $size == 'full' { - // @return 100rem; - // } @else { - // @return cat-token('size.border.radius.#{$size}'); - // } - @return 1rem; + @if $size == '0' or $size == 0 { + @return 0; + } @else if $size == 'full' { + @return 100rem; + } @else { + @return cat-token('size.border.radius.#{$size}'); + } } diff --git a/tokens/config.js b/tokens/config.js index 9770bd621..518491ab6 100644 --- a/tokens/config.js +++ b/tokens/config.js @@ -54,26 +54,26 @@ module.exports = { format: 'typescript/es6-declarations', }] }, - cssHex: { - transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css'], - prefix: 'cat', - buildPath: 'dist/css/', - files: [{ - destination: 'variables-hex.css', - format: 'css/variables', - options: { - fileHeader: 'cat/header', - outputReferences: false - } - }] - }, + // cssHex: { + // transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css'], + // prefix: 'cat', + // buildPath: 'dist/css/', + // files: [{ + // destination: 'variables-hex.css', + // format: 'css/variables', + // options: { + // fileHeader: 'cat/header', + // outputReferences: false + // } + // }] + // }, scss: { transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'cat/cssProp', 'cat/scssPrivate'], prefix: 'cat', buildPath: 'dist/scss/', files: [{ destination: '_variables.scss', - format: 'scss/variables', + format: 'scss/map-deep', options: { outputReferences: true, themeable: true From 26ef759cf122d9aaec5990eda8032bd9eefa8641 Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Thu, 15 Aug 2024 09:05:09 +0200 Subject: [PATCH 3/9] chore: cleanup --- .../src/components/cat-avatar/cat-avatar.scss | 6 +- core/src/components/cat-badge/cat-badge.scss | 39 ++++---- .../src/components/cat-button/cat-button.scss | 90 +++++++++---------- core/src/components/cat-card/cat-card.scss | 2 +- .../components/cat-checkbox/cat-checkbox.scss | 40 ++++----- .../cat-date-inline/cat-date-inline.scss | 4 +- .../cat-datepicker-inline.scss | 2 +- .../components/cat-dropdown/cat-dropdown.scss | 12 +-- .../cat-form-hint/cat-form-hint.scss | 2 +- core/src/components/cat-input/cat-input.scss | 28 +++--- 10 files changed, 112 insertions(+), 113 deletions(-) diff --git a/core/src/components/cat-avatar/cat-avatar.scss b/core/src/components/cat-avatar/cat-avatar.scss index 52000f27e..971141611 100644 --- a/core/src/components/cat-avatar/cat-avatar.scss +++ b/core/src/components/cat-avatar/cat-avatar.scss @@ -4,8 +4,8 @@ // ----- -$-background-color: red; //$cat-color-base-neutral-100; -$-color: blue; //$cat-color-base-neutral-500; +$-background-color: cat-token('color.base.neutral.100'); +$-color: cat-token('color.base.neutral.500'); $-sizes: ( 'xl': 3.5rem, 'l': 3rem, @@ -47,7 +47,7 @@ $-sizes: ( @include cat-select(none); &:focus-visible { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: 1px; } } diff --git a/core/src/components/cat-badge/cat-badge.scss b/core/src/components/cat-badge/cat-badge.scss index 0a8352605..d9aae24f8 100644 --- a/core/src/components/cat-badge/cat-badge.scss +++ b/core/src/components/cat-badge/cat-badge.scss @@ -49,26 +49,26 @@ $-paddings: ( // ----- theme -// $-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2); +$-outline: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent); :host([variant='filled']) { - // background-color: cat-token-wrap(var(--bg)); - // color: cat-token-wrap(var(--fill)); + background-color: var(--bg); + color: var(--fill); font-weight: 600; @include cat-font-smooth; } :host([variant='outlined']) { - background-color: $cat-color-ui-background-surface; - // color: cat-token-wrap(var(--text)); - // box-shadow: $-outline; + background-color: cat-token('color.ui.background.surface'); + color: var(--text); + box-shadow: $-outline; } @mixin theme($theme) { :host([color='#{$theme}']) { - // --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; - // --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; - // --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; + --bg: #{cat-token('color.theme.#{$theme}.bg')}; + --fill: #{cat-token('color.theme.#{$theme}.fill')}; + --text: #{cat-token('color.theme.#{$theme}.text')}; } } @@ -98,8 +98,7 @@ $-paddings: ( // ----- pulse -// $-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg)); -$-pulse-0: transparent 0 0 0 0.5rem; +$-pulse-0: 0 0 0 0 var(--bg); $-pulse-70: transparent 0 0 0 0.5rem; $-pulse-100: transparent 0 0 0 0; @@ -126,15 +125,15 @@ $-pulse-100: transparent 0 0 0 0; } @keyframes pulse-outlined { - // 0% { - // box-shadow: $-pulse-0, $-outline; - // } + 0% { + box-shadow: $-pulse-0, $-outline; + } - // 70% { - // box-shadow: $-pulse-70, $-outline; - // } + 70% { + box-shadow: $-pulse-70, $-outline; + } - // 100% { - // box-shadow: $-pulse-100, $-outline; - // } + 100% { + box-shadow: $-pulse-100, $-outline; + } } diff --git a/core/src/components/cat-button/cat-button.scss b/core/src/components/cat-button/cat-button.scss index b77bea8df..67f9b8972 100644 --- a/core/src/components/cat-button/cat-button.scss +++ b/core/src/components/cat-button/cat-button.scss @@ -34,13 +34,13 @@ $button-sizes: ( box-sizing: border-box; cursor: pointer; transition: - color $cat-time-transition-s linear, - border-color $cat-time-transition-s linear, - background-color $cat-time-transition-s linear, - box-shadow $cat-time-transition-s linear; + color cat-token('time.transition.s') linear, + border-color cat-token('time.transition.s') linear, + background-color cat-token('time.transition.s') linear, + box-shadow cat-token('time.transition.s') linear; &:focus-visible { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: 1px; } } @@ -116,47 +116,47 @@ $button-sizes: ( // ----- theme .cat-button-filled { - // background-color: cat-token-wrap(var(--bg)); - // color: cat-token-wrap(var(--fill)); + background-color: var(--bg); + color: var(--fill); font-weight: var(--cat-font-weight-button, 600); @include cat-font-smooth; &.cat-button-disabled { - // --bg: #{cat-token('color.ui.background.muted', $wrap: false)}; - // --fill: #{cat-token('color.ui.font.muted', $wrap: false)}; + --bg: #{cat-token('color.ui.background.muted')}; + --fill: #{cat-token('color.ui.font.muted')}; } } .cat-button-outlined { - background-color: $cat-color-ui-background-surface; - // box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2); - // color: cat-token-wrap(var(--text)); + background-color: cat-token('color.ui.background.surface'); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--base) 20%, transparent); + color: var(--text); &.cat-button-disabled { - // --base: #{cat-token('color.ui.font.muted', $wrap: false)}; - // --text: #{cat-token('color.ui.font.muted', $wrap: false)}; + --base: #{cat-token('color.ui.font.muted')}; + --text: #{cat-token('color.ui.font.muted')}; } &:hover:not(.cat-button-disabled):not(.cat-button-loading) { - // background-color: cat-token-wrap(var(--base), $alpha: 0.1); + background-color: color-mix(in srgb, var(--base) 10%, transparent); } &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) { - // background-color: cat-token-wrap(var(--base), $alpha: 0.1); + background-color: color-mix(in srgb, var(--base) 10%, transparent); } &:active:not(.cat-button-disabled):not(.cat-button-loading) { - // background-color: cat-token-wrap(var(--base), $alpha: 0.1); + background-color: color-mix(in srgb, var(--base) 10%, transparent); } } .cat-button-text { background-color: transparent; - // color: cat-token-wrap(var(--text)); - text-decoration: $cat-font-decoration-link-button; + color: var(--text); + text-decoration: cat-token('font.decoration.linkButton'); &.cat-button-disabled { - // --text: #{cat-token('color.ui.font.muted', $wrap: false)}; + --text: #{cat-token('color.ui.font.muted')}; } &:hover:not(.cat-button-disabled):not(.cat-button-loading) { @@ -170,44 +170,44 @@ $button-sizes: ( .cat-button-link { background-color: transparent; - // color: cat-token-wrap(var(--text)); + color: var(--text); &.cat-button-disabled { - // --text: #{cat-token('color.ui.font.muted', $wrap: false)}; + --text: #{cat-token('color.ui.font.muted')}; } &:hover:not(.cat-button-disabled):not(.cat-button-loading) { - text-decoration: $cat-font-decoration-link-hover; + text-decoration: cat-token('font.decoration.linkHover'); } &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) { - text-decoration: $cat-font-decoration-link-hover; + text-decoration: cat-token('font.decoration.linkHover'); } } @mixin theme($theme) { .cat-button-#{$theme} { - // --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; - // --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)}; - // --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; - // @if $theme == 'secondary' { - // --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)}; - // } @else { - // --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)}; - // } - - // &:hover:not(.cat-button-disabled):not(.cat-button-loading) { - // --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)}; - // --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)}; - // --text: #{cat-token('color.theme.#{$theme}.text-hover', $wrap: false)}; - // } - - // &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading), - // &:active:not(.cat-button-disabled):not(.cat-button-loading) { - // --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)}; - // --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)}; - // --text: #{cat-token('color.theme.#{$theme}.text-active', $wrap: false)}; - // } + --bg: #{cat-token('color.theme.#{$theme}.bg')}; + --fill: #{cat-token('color.theme.#{$theme}.fill')}; + --text: #{cat-token('color.theme.#{$theme}.text')}; + @if $theme == 'secondary' { + --base: #{cat-token('color.theme.#{$theme}.bg')}; + } @else { + --base: #{cat-token('color.theme.#{$theme}.text')}; + } + + &:hover:not(.cat-button-disabled):not(.cat-button-loading) { + --bg: #{cat-token('color.theme.#{$theme}.bgHover')}; + --fill: #{cat-token('color.theme.#{$theme}.fillHover')}; + --text: #{cat-token('color.theme.#{$theme}.textHover')}; + } + + &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading), + &:active:not(.cat-button-disabled):not(.cat-button-loading) { + --bg: #{cat-token('color.theme.#{$theme}.bgActive')}; + --fill: #{cat-token('color.theme.#{$theme}.fillActive')}; + --text: #{cat-token('color.theme.#{$theme}.textActive')}; + } } } diff --git a/core/src/components/cat-card/cat-card.scss b/core/src/components/cat-card/cat-card.scss index 8e42a8522..4876253b4 100644 --- a/core/src/components/cat-card/cat-card.scss +++ b/core/src/components/cat-card/cat-card.scss @@ -6,7 +6,7 @@ $-padding: 1.25rem; :host { display: block; border-radius: cat-border-radius('l'); - background-color: $cat-color-ui-background-surface; + background-color: cat-token('color.ui.background.surface'); padding: $-padding; } diff --git a/core/src/components/cat-checkbox/cat-checkbox.scss b/core/src/components/cat-checkbox/cat-checkbox.scss index 2ae2f8ce4..d09bcd118 100644 --- a/core/src/components/cat-checkbox/cat-checkbox.scss +++ b/core/src/components/cat-checkbox/cat-checkbox.scss @@ -56,12 +56,12 @@ input { position: relative; height: $checkbox-height; width: $checkbox-width; - background-color: $cat-color-ui-background-input; - border: 1px solid $cat-color-ui-border-dark; + background-color: cat-token('color.ui.background.input'); + border: 1px solid cat-token('color.ui.border.dark'); border-radius: cat-border-radius(s); transition: - background-color $cat-time-transition-s ease, - border-color $cat-time-transition-s ease; + background-color cat-token('time.transition.s') ease, + border-color cat-token('time.transition.s') ease; pointer-events: none; box-sizing: border-box; @@ -72,7 +72,7 @@ input { stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; - transition: all $cat-time-transition-s ease; + transition: all cat-token('time.transition.s') ease; width: 50%; position: absolute; top: 50%; @@ -81,9 +81,9 @@ input { } :checked + & { - background-color: $cat-color-theme-primary-bg; - border-color: $cat-color-theme-primary-bg; - stroke: $cat-color-theme-primary-fill; + background-color: cat-token('color.theme.primary.bg'); + border-color: cat-token('color.theme.primary.bg'); + stroke: cat-token('color.theme.primary.fill'); .check { stroke-dashoffset: 0; @@ -91,9 +91,9 @@ input { } :indeterminate + & { - background-color: $cat-color-theme-primary-bg; - border-color: $cat-color-theme-primary-bg; - stroke: $cat-color-theme-primary-fill; + background-color: cat-token('color.theme.primary.bg'); + border-color: cat-token('color.theme.primary.bg'); + stroke: cat-token('color.theme.primary.fill'); .check { stroke-dashoffset: 16px; @@ -105,27 +105,27 @@ input { } :focus-visible + & { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: 1px; } .is-disabled & { - background-color: $cat-color-ui-background-muted; - border-color: $cat-color-ui-border-dark; - stroke: $cat-color-ui-font-muted; + background-color: cat-token('color.ui.background.muted'); + border-color: cat-token('color.ui.border.dark'); + stroke: cat-token('color.ui.font.muted'); } } :host(.cat-error) { .box { - border: 1px solid $cat-color-theme-danger-bg; + border: 1px solid cat-token('color.theme.danger.bg'); } :checked + .box, :indeterminate + .box { - background-color: $cat-color-theme-danger-bg; - border-color: $cat-color-theme-danger-bg; - stroke: $cat-color-theme-danger-fill; + background-color: cat-token('color.theme.danger.bg'); + border-color: cat-token('color.theme.danger.bg'); + stroke: cat-token('color.theme.danger.fill'); } } @@ -140,5 +140,5 @@ input { .is-disabled { cursor: not-allowed; - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } diff --git a/core/src/components/cat-date-inline/cat-date-inline.scss b/core/src/components/cat-date-inline/cat-date-inline.scss index f54390384..04b1bb06a 100644 --- a/core/src/components/cat-date-inline/cat-date-inline.scss +++ b/core/src/components/cat-date-inline/cat-date-inline.scss @@ -107,7 +107,7 @@ .picker-grid-head > *, .picker-grid-weeks > * { @include cat-body('xs', 600); - color: $cat-color-ui-font-muted !important; + color: cat-token('color.ui.font.muted') !important; text-decoration: none; } @@ -146,7 +146,7 @@ .cursor-help { margin-block: 0; @include cat-body('xs'); - color: $cat-color-ui-font-muted !important; + color: cat-token('color.ui.font.muted') !important; text-align: center; flex: 1; diff --git a/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss b/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss index 4aab4cfaa..af6d08fbd 100644 --- a/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss +++ b/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss @@ -33,7 +33,7 @@ input, .flatpickr-time-separator, .flatpickr-am-pm { - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); opacity: 0.75; } } diff --git a/core/src/components/cat-dropdown/cat-dropdown.scss b/core/src/components/cat-dropdown/cat-dropdown.scss index 0d4a322a6..b03b87506 100644 --- a/core/src/components/cat-dropdown/cat-dropdown.scss +++ b/core/src/components/cat-dropdown/cat-dropdown.scss @@ -22,21 +22,21 @@ $-max-height: calc(100vh - 48px); .content { position: fixed; - background: $cat-color-ui-background-surface; + background: cat-token('color.ui.background.surface'); -webkit-overflow-scrolling: touch; min-height: $-min-height; max-height: $-max-height; @include cat-elevation(4); border-radius: cat-border-radius('m'); - border: 1px solid $cat-color-ui-border-default; + border: 1px solid cat-token('color.ui.border.default'); z-index: cat-z-index('dropdown'); // The 3 lines below set the initial styling (when not visible) display: none; opacity: 0; transform: scale(0.9); transition: - transform $cat-time-transition-s cubic-bezier(0.3, 0, 0.8, 0.15), - opacity $cat-time-transition-s cubic-bezier(0.3, 0, 0.8, 0.15); + transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15), + opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15); // Sets the origin point so the scaling transition matches the placement &[data-placement^='top'] { @@ -91,8 +91,8 @@ $-max-height: calc(100vh - 48px); opacity: 1; transform: scale(1); transition: - transform $cat-time-transition-m cubic-bezier(0.05, 0.7, 0.1, 1), - opacity $cat-time-transition-m cubic-bezier(0.05, 0.7, 0.1, 1); + transform cat-token('time.transition.m') cubic-bezier(0.05, 0.7, 0.1, 1), + opacity cat-token('time.transition.m') cubic-bezier(0.05, 0.7, 0.1, 1); } &.overflow-auto { diff --git a/core/src/components/cat-form-hint/cat-form-hint.scss b/core/src/components/cat-form-hint/cat-form-hint.scss index 7f4c708fc..020e9b031 100644 --- a/core/src/components/cat-form-hint/cat-form-hint.scss +++ b/core/src/components/cat-form-hint/cat-form-hint.scss @@ -12,7 +12,7 @@ display: flex; flex-direction: column; gap: 0.25rem; - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); @include cat-body('s', null); .input-hint, diff --git a/core/src/components/cat-input/cat-input.scss b/core/src/components/cat-input/cat-input.scss index 95c799022..7f5a8c489 100644 --- a/core/src/components/cat-input/cat-input.scss +++ b/core/src/components/cat-input/cat-input.scss @@ -34,11 +34,11 @@ padding: 0 0.75rem; height: form-label.$cat-input-height; overflow: hidden; - background: $cat-color-ui-background-input; + background: cat-token('color.ui.background.input'); border-radius: cat-border-radius('m'); box-shadow: inset 0 0 0 1px rgb(var(--border-color)); - transition: box-shadow $cat-time-transition-s linear; - // --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; + transition: box-shadow cat-token('time.transition.s') linear; + --border-color: #{cat-token('color.ui.border.dark')}; &.input-round { border-radius: 10rem; @@ -49,9 +49,9 @@ } &.input-disabled { - background: $cat-color-ui-background-muted; + background: cat-token('color.ui.background.muted'); cursor: not-allowed; - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } &:not(.input-disabled):hover { @@ -61,7 +61,7 @@ } &:focus-within { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: -1px; &:has(.clearable:focus) { @@ -70,7 +70,7 @@ } &.input-invalid { - // --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; + --border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent); } /* stylelint-disable property-no-vendor-prefix */ @@ -78,7 +78,7 @@ &, &:hover, &:focus { - background-color: $cat-color-ui-background-input-autofill; + background-color: cat-token('color.ui.background.inputAutofill'); } } /* stylelint-enable property-no-vendor-prefix */ @@ -89,16 +89,16 @@ display: inline-flex; align-items: center; @include cat-select(none); - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } .text-prefix { - border-right: 1px solid $cat-color-ui-border-dark; + border-right: 1px solid cat-token('color.ui.border.dark'); padding-right: 0.75rem; } .text-suffix { - border-left: 1px solid $cat-color-ui-border-dark; + border-left: 1px solid cat-token('color.ui.border.dark'); padding-left: 0.75rem; } @@ -131,7 +131,7 @@ input { .input-disabled & { cursor: not-allowed; - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } &.has-clearable, @@ -144,7 +144,7 @@ input { } &::placeholder { - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } /* stylelint-disable property-no-vendor-prefix */ @@ -152,7 +152,7 @@ input { &, &:hover, &:focus { - -webkit-box-shadow: 0 0 0 9999px $cat-color-ui-background-input-autofill inset; + -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset; } } /* stylelint-enable property-no-vendor-prefix */ From ccd3eaa448d648d5818cabd10f6ede65e1bb3aac Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Thu, 15 Aug 2024 09:34:13 +0200 Subject: [PATCH 4/9] chore: cleanup --- core/src/components/cat-input/cat-input.scss | 6 +- core/src/components/cat-radio/cat-radio.scss | 22 +- .../src/components/cat-select/cat-select.scss | 42 +- .../components/cat-skeleton/cat-skeleton.scss | 4 +- core/src/components/cat-tabs/cat-tabs.scss | 6 +- .../components/cat-textarea/cat-textarea.scss | 28 +- .../src/components/cat-toggle/cat-toggle.scss | 22 +- .../components/cat-tooltip/cat-tooltip.scss | 12 +- core/src/styles/_variables.scss | 4 +- core/src/styles/core/_base.scss | 6 +- core/src/styles/core/_dialog.scss | 4 +- core/src/styles/core/_notification.scss | 20 +- core/src/styles/core/_typography.scss | 32 +- core/src/styles/utils/_border.scss | 22 +- core/src/styles/utils/_color.scss | 88 +-- core/src/styles/utils/_display.scss | 18 +- core/src/styles/utils/_layout.scss | 10 +- core/src/styles/utils/_media.mixins.scss | 12 +- core/src/styles/utils/_typography.mixins.scss | 26 +- core/src/styles/utils/_z-index.mixins.scss | 7 +- core/src/styles/vendor/_flatpickr.scss | 734 +++++++++--------- 21 files changed, 559 insertions(+), 566 deletions(-) diff --git a/core/src/components/cat-input/cat-input.scss b/core/src/components/cat-input/cat-input.scss index 7f5a8c489..a7a452035 100644 --- a/core/src/components/cat-input/cat-input.scss +++ b/core/src/components/cat-input/cat-input.scss @@ -36,7 +36,7 @@ overflow: hidden; background: cat-token('color.ui.background.input'); border-radius: cat-border-radius('m'); - box-shadow: inset 0 0 0 1px rgb(var(--border-color)); + box-shadow: inset 0 0 0 1px var(--border-color); transition: box-shadow cat-token('time.transition.s') linear; --border-color: #{cat-token('color.ui.border.dark')}; @@ -56,8 +56,8 @@ &:not(.input-disabled):hover { box-shadow: - inset 0 0 0 1px rgb(var(--border-color)), - 0 0 0 1px rgb(var(--border-color)); + inset 0 0 0 1px var(--border-color), + 0 0 0 1px var(--border-color); } &:focus-within { diff --git a/core/src/components/cat-radio/cat-radio.scss b/core/src/components/cat-radio/cat-radio.scss index b3d7275a5..2b9b76550 100644 --- a/core/src/components/cat-radio/cat-radio.scss +++ b/core/src/components/cat-radio/cat-radio.scss @@ -41,7 +41,7 @@ label { position: absolute; width: 0.75rem; height: 0.75rem; - background-color: $cat-color-theme-primary-bg; + background-color: cat-token('color.theme.primary.bg'); border-radius: 10rem; top: calc(50% - 0.375rem); left: calc(50% - 0.375rem); @@ -54,13 +54,13 @@ input { width: $radio-width; height: $radio-height; appearance: none; - background-color: $cat-color-ui-background-input; - border: 1px solid $cat-color-ui-border-dark; + background-color: cat-token('color.ui.background.input'); + border: 1px solid cat-token('color.ui.border.dark'); border-radius: 10rem; cursor: inherit; &:checked { - border-color: $cat-color-theme-primary-bg; + border-color: cat-token('color.theme.primary.bg'); + .circle { visibility: visible; @@ -68,18 +68,18 @@ input { } &:focus-visible { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: 1px; } } :host(.cat-error) { input { - border-color: $cat-color-theme-danger-bg; + border-color: cat-token('color.theme.danger.bg'); } .circle { - background-color: $cat-color-theme-danger-bg; + background-color: cat-token('color.theme.danger.bg'); } } @@ -93,17 +93,17 @@ input { .is-disabled { cursor: not-allowed; - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); input { - background-color: $cat-color-ui-background-muted; + background-color: cat-token('color.ui.background.muted'); &:checked { - border-color: $cat-color-ui-border-dark; + border-color: cat-token('color.ui.border.dark'); } } .circle { - background-color: $cat-color-ui-border-dark; + background-color: cat-token('color.ui.border.dark'); } } diff --git a/core/src/components/cat-select/cat-select.scss b/core/src/components/cat-select/cat-select.scss index 756e8da31..a590e06ed 100644 --- a/core/src/components/cat-select/cat-select.scss +++ b/core/src/components/cat-select/cat-select.scss @@ -40,26 +40,26 @@ label { .select-wrapper { display: flex; align-items: flex-start; - background: $cat-color-ui-background-input; + background: cat-token('color.ui.background.input'); border-radius: cat-border-radius('m'); - box-shadow: inset 0 0 0 1px rgb(var(--border-color)); - transition: box-shadow $cat-time-transition-s linear; + box-shadow: inset 0 0 0 1px var(--border-color); + transition: box-shadow cat-token('time.transition.s') linear; padding: 0.25rem; - // --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; + --border-color: #{cat-token('color.ui.border.dark')}; &:not(.select-disabled):hover { box-shadow: - inset 0 0 0 1px rgb(var(--border-color)), - 0 0 0 1px rgb(var(--border-color)); + inset 0 0 0 1px var(--border-color), + 0 0 0 1px var(--border-color); } &:focus-within { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: -1px; } &.select-invalid { - // --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; + --border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent); } /* stylelint-disable property-no-vendor-prefix */ @@ -67,7 +67,7 @@ label { &, &:hover, &:focus { - background-color: $cat-color-ui-background-input-autofill; + background-color: cat-token('color.ui.background.inputAutofill'); } } /* stylelint-enable property-no-vendor-prefix */ @@ -75,18 +75,18 @@ label { :host(.cat-error) { .select-wrapper { - box-shadow: 0 0 0 1px $cat-color-theme-danger-bg; + box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg'); &:not(.input-disabled):hover { - box-shadow: 0 0 0 2px $cat-color-theme-danger-bg; + box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg'); } } } .select-disabled { - background: $cat-color-ui-background-muted; + background: cat-token('color.ui.background.muted'); cursor: not-allowed; - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); pointer-events: none; } @@ -126,7 +126,7 @@ label { @include cat-ellipsis; &::placeholder { - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } .select-disabled & { @@ -143,7 +143,7 @@ label { align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; - background: $cat-color-ui-background-muted; + background: cat-token('color.ui.background.muted'); border-radius: cat-border-radius('s'); white-space: nowrap; min-width: 0; @@ -161,7 +161,7 @@ label { } .select-btn { - transition: transform $cat-time-transition-s linear; + transition: transform cat-token('time.transition.s') linear; &::part(button) { outline: none; @@ -183,13 +183,13 @@ cat-spinner { .select-dropdown { position: fixed; right: 0; - background: $cat-color-ui-background-surface; + background: cat-token('color.ui.background.surface'); display: none; overflow: auto; // -webkit-overflow-scrolling: touch; @include cat-elevation(4); border-radius: cat-border-radius('m'); - border: 1px solid $cat-color-ui-border-default; + border: 1px solid cat-token('color.ui.border.default'); z-index: cat-z-index('dropdown'); /* Avoid layout interference */ @@ -249,11 +249,11 @@ cat-spinner { } .select-option:hover { - // background-color: cat-token('color.theme.secondary.bg', 0.05); + background-color: color-mix(in srgb, #{cat-token('color.theme.secondary.bg')} 5%, transparent); } .select-option-active { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: -2px; } @@ -264,5 +264,5 @@ cat-spinner { .select-option-description { @include cat-ellipsis(2); - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } diff --git a/core/src/components/cat-skeleton/cat-skeleton.scss b/core/src/components/cat-skeleton/cat-skeleton.scss index 85dafb6f9..4144506d6 100644 --- a/core/src/components/cat-skeleton/cat-skeleton.scss +++ b/core/src/components/cat-skeleton/cat-skeleton.scss @@ -20,8 +20,8 @@ $skeleton-sizes: ( flex-direction: column; position: relative; - // --background: #{$cat-color-ui-background-skeleton}; - // --highlight: #{$cat-color-ui-background-skeletonHighlight}; + --background: #{cat-token('color.ui.background.skeleton')}; + --highlight: #{cat-token('color.ui.background.skeletonHighlight')}; --speed: 2s; } diff --git a/core/src/components/cat-tabs/cat-tabs.scss b/core/src/components/cat-tabs/cat-tabs.scss index 5938465ea..427db9bca 100644 --- a/core/src/components/cat-tabs/cat-tabs.scss +++ b/core/src/components/cat-tabs/cat-tabs.scss @@ -4,7 +4,7 @@ :host { display: flex; flex-direction: row; - box-shadow: inset 0 -1px 0 0 $cat-color-ui-border-default; + box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.default'); } :host([hidden]) { @@ -58,11 +58,11 @@ &.cat-tab-active { font-weight: 700; - color: $cat-color-theme-primary-text-active; + color: cat-token('color.theme.primary.textActive'); } &.cat-tab-error { - color: $cat-color-theme-danger-text-active; + color: cat-token('color.theme.danger.textActive'); } &.cat-tab-active::after { diff --git a/core/src/components/cat-textarea/cat-textarea.scss b/core/src/components/cat-textarea/cat-textarea.scss index 65823cae5..74f524f0a 100644 --- a/core/src/components/cat-textarea/cat-textarea.scss +++ b/core/src/components/cat-textarea/cat-textarea.scss @@ -42,11 +42,11 @@ position: absolute; top: calc(0.625rem - 2px); right: 0.75rem; - // background: cat-token('color.ui.background.input', 0.75); + background: color-mix(in srgb, #{cat-token('color.ui.background.input')} 75%, transparent); border-radius: 100rem; .textarea-disabled & { - // background: cat-token('color.ui.background.muted', 0.75); + background: color-mix(in srgb, #{cat-token('color.ui.background.muted')} 75%, transparent); } } @@ -56,38 +56,38 @@ textarea { box-sizing: border-box; min-height: form-label.$cat-input-height; font: inherit; - background: $cat-color-ui-background-input; + background: cat-token('color.ui.background.input'); border-radius: cat-border-radius('m'); border: none; - box-shadow: inset 0 0 0 1px rgb(var(--border-color)); - transition: box-shadow $cat-time-transition-s linear; + box-shadow: inset 0 0 0 1px var(--border-color); + transition: box-shadow cat-token('time.transition.s') linear; resize: vertical; - // --border-color: #{cat-token('color.ui.border.dark', $wrap: false)}; + --border-color: #{cat-token('color.ui.border.dark')}; &:disabled { - background: $cat-color-ui-background-muted; + background: cat-token('color.ui.background.muted'); cursor: not-allowed; - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); resize: none; } &:not(:disabled):hover { box-shadow: - inset 0 0 0 1px rgb(var(--border-color)), - 0 0 0 1px rgb(var(--border-color)); + inset 0 0 0 1px var(--border-color), + 0 0 0 1px var(--border-color); } &:focus { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: -1px; } .textarea-invalid & { - // --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)}; + --border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent); } &::placeholder { - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } /* stylelint-disable property-no-vendor-prefix */ @@ -95,7 +95,7 @@ textarea { &, &:hover, &:focus { - -webkit-box-shadow: 0 0 0 9999px $cat-color-ui-background-input-autofill inset; + -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset; } } /* stylelint-enable property-no-vendor-prefix */ diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss index b31523638..be3a2cbc0 100644 --- a/core/src/components/cat-toggle/cat-toggle.scss +++ b/core/src/components/cat-toggle/cat-toggle.scss @@ -51,16 +51,16 @@ input { width: $toggle-width; height: $toggle-height; border-radius: 10rem; - background-color: $cat-color-ui-border-dark; - transition: background-color $cat-time-transition-s ease; + background-color: cat-token('color.ui.border.dark'); + transition: background-color cat-token('time.transition.s') ease; pointer-events: none; :checked + & { - background-color: $cat-color-theme-primary-bg; + background-color: cat-token('color.theme.primary.bg'); } :focus-visible + & { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); outline-offset: 1px; } @@ -72,30 +72,30 @@ input { background: #fff; border-radius: 10rem; transform: translateX(calc(2px - 0.5rem)); - transition: transform $cat-time-transition-s linear; + transition: transform cat-token('time.transition.s') linear; @include cat-elevation(2); :checked + & { transform: translateX(calc(-2px + 0.5rem)); - background: $cat-color-theme-primary-fill; + background: cat-token('color.theme.primary.fill'); } } .is-disabled & { - background-color: $cat-color-ui-border-dark; + background-color: cat-token('color.ui.border.dark'); } } :host(.cat-error) { .toggle { - //background-color: cat-token('color.theme.danger.bg', 0.2); + background-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent); } :checked + .toggle { - background-color: $cat-color-theme-danger-bg; + background-color: cat-token('color.theme.danger.bg'); &::after { - background: $cat-color-theme-danger-fill; + background: cat-token('color.theme.danger.fill'); } } } @@ -110,5 +110,5 @@ input { .is-disabled { cursor: not-allowed; - color: $cat-color-ui-font-muted; + color: cat-token('color.ui.font.muted'); } diff --git a/core/src/components/cat-tooltip/cat-tooltip.scss b/core/src/components/cat-tooltip/cat-tooltip.scss index ae0b5db09..6754595cf 100644 --- a/core/src/components/cat-tooltip/cat-tooltip.scss +++ b/core/src/components/cat-tooltip/cat-tooltip.scss @@ -14,20 +14,20 @@ $-shift-padding: 0.25rem; // padding given to the shift() middleware } .tooltip { - // --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)}; - // --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)}; + --cat-font-color-head: #{cat-token('color.ui.font.tooltip')}; + --cat-font-color-body: #{cat-token('color.ui.font.tooltip')}; position: fixed; width: max-content; top: 0; left: 0; box-sizing: border-box; @include cat-body('s', 500); - background-color: $cat-color-ui-background-tooltip; + background-color: cat-token('color.ui.background.tooltip'); border-radius: cat-border-radius('m'); - color: $cat-color-ui-font-tooltip; + color: cat-token('color.ui.font.tooltip'); transition: - opacity $cat-time-transition-m linear, - visibility $cat-time-transition-m linear; + opacity cat-token('time.transition.m') linear, + visibility cat-token('time.transition.m') linear; visibility: hidden; opacity: 0; box-shadow: $-box-shadow; diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss index 948e81a7d..812d5884c 100644 --- a/core/src/styles/_variables.scss +++ b/core/src/styles/_variables.scss @@ -37,8 +37,8 @@ // -------- $cat-font-family-head: var(--cat-font-family-head); -$cat-font-color-head: rgb(var(--cat-font-color-head)); -$cat-font-color-mono: rgb(var(--cat-font-color-mono)); +$cat-font-color-head: var(--cat-font-color-head); +$cat-font-color-mono: var(--cat-font-color-mono); // -------- // -- Spacings diff --git a/core/src/styles/core/_base.scss b/core/src/styles/core/_base.scss index a9fe042cb..a284d293c 100644 --- a/core/src/styles/core/_base.scss +++ b/core/src/styles/core/_base.scss @@ -3,11 +3,11 @@ html, body { - background-color: $cat-color-ui-background-canvas; + background-color: cat-token('color.ui.background.canvas'); } body { @include cat-body('m'); - font-family: $cat-font-family-base, $font-fallback-base, $cat-font-family-emoji, $font-fallback-emoji; - color: $cat-color-ui-font-base; + font-family: cat-token('font.family.base'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji; + color: cat-token('color.ui.font.base'); } diff --git a/core/src/styles/core/_dialog.scss b/core/src/styles/core/_dialog.scss index d5d22fbd1..8586e80cb 100644 --- a/core/src/styles/core/_dialog.scss +++ b/core/src/styles/core/_dialog.scss @@ -17,13 +17,13 @@ $-dialog-padding: 1.5rem; .cat-backdrop { - // background-color: RGB(#{cat-token('color.ui.background.backdrop', $cat-opacity-backdrop, $wrap: false)}); + // background-color: #{cat-token('color.ui.background.backdrop', cat-token('opacity.backdrop'))}; } .cat-dialog { display: flex; flex-direction: column; - background-color: $cat-color-ui-background-surface; + background-color: cat-token('color.ui.background.surface'); border-radius: cat-border-radius('l'); @include cat-elevation(7); container: dialog / inline-size; diff --git a/core/src/styles/core/_notification.scss b/core/src/styles/core/_notification.scss index 60f0a5ad7..19dd1e967 100644 --- a/core/src/styles/core/_notification.scss +++ b/core/src/styles/core/_notification.scss @@ -4,24 +4,24 @@ .cat-toastify { display: flex; border-radius: cat-border-radius('l'); - background: $cat-color-ui-background-surface; + background: cat-token('color.ui.background.surface'); padding: 1.25rem; box-shadow: none; - color: $cat-color-ui-font-base; + color: cat-token('color.ui.font.base'); width: 400px; max-width: 400px; cursor: unset; @include cat-elevation(4); &.cat-toastify-dark { - // --cat-font-color-base: #{cat-token('color.ui.font.baseInverted', $wrap: false)}; - // --cat-primary-text: #{cat-token('color.theme.primaryInverted.text', $wrap: false)}; - // --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.text-hover', $wrap: false)}; - // --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.text-active', $wrap: false)}; - // --cat-secondary-text: #{cat-token('color.theme.secondaryInverted.text', $wrap: false)}; - // --cat-secondary-text-hover: #{cat-token('color.theme.secondaryInverted.text-hover', $wrap: false)}; - // --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.text-active', $wrap: false)}; - background: $cat-color-ui-background-surface-inverted; + --cat-font-color-base: #{cat-token('color.ui.font.baseInverted')}; + --cat-primary-text: #{cat-token('color.theme.primaryInverted.text')}; + --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.textHover')}; + --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.textActive')}; + --cat-secondary-text: #{cat-token('color.theme.secondaryInverted.text')}; + --cat-secondary-text-hover: #{cat-token('color.theme.secondaryInverted.textHover')}; + --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.textActive')}; + background: cat-token('color.ui.background.surfaceInverted'); } } diff --git a/core/src/styles/core/_typography.scss b/core/src/styles/core/_typography.scss index 7fa38fa7c..6854675f5 100644 --- a/core/src/styles/core/_typography.scss +++ b/core/src/styles/core/_typography.scss @@ -34,7 +34,7 @@ hr, display: block; border: 0; height: 1px; - background-color: $cat-color-ui-border-default; + background-color: cat-token('color.ui.border.default'); overflow: hidden; flex-shrink: 0; } @@ -42,21 +42,21 @@ hr, // ----- links a { - color: $cat-color-theme-primary-text; - text-decoration: $cat-font-decoration-link; - transition: color $cat-time-transition-s linear; + color: cat-token('color.theme.primary.text'); + text-decoration: cat-token('font.decoration.link'); + transition: color cat-token('time.transition.s') linear; &:hover { - color: $cat-color-theme-primary-text-hover; - text-decoration: $cat-font-decoration-link-hover; + color: cat-token('color.theme.primary.textHover'); + text-decoration: cat-token('font.decoration.linkHover'); } &:active { - color: $cat-color-theme-primary-text-active; + color: cat-token('color.theme.primary.textActive'); } &:focus-visible { - outline: 2px solid $cat-color-ui-border-focus; + outline: 2px solid cat-token('color.ui.border.focus'); // outline-offset: -2px; } } @@ -126,8 +126,8 @@ dd:not(:last-child) { blockquote { padding: 0.75rem 0 0.75rem calc(1.5rem - 2px); - border-left: 2px solid $cat-color-ui-border-quote; - color: $cat-color-ui-font-quote; + border-left: 2px solid cat-token('color.ui.border.quote'); + color: cat-token('color.ui.font.quote'); @include cat-body('l', null); font-style: italic; @@ -145,7 +145,7 @@ blockquote { padding-left: 0; padding-right: calc(2rem - 4px); border-left: none; - border-right: 2px solid $cat-color-ui-border-quote; + border-right: 2px solid cat-token('color.ui.border.quote'); } } @@ -180,9 +180,9 @@ pre { kbd, code { margin: 0 0.125rem; - color: $cat-color-ui-font-muted; - background: $cat-color-ui-background-surface; - box-shadow: 0 0 0 2px $cat-color-ui-border-default; + color: cat-token('color.ui.font.muted'); + background: cat-token('color.ui.background.surface'); + box-shadow: 0 0 0 2px cat-token('color.ui.border.default'); border-radius: cat-border-radius('s'); } @@ -210,7 +210,7 @@ code { :where(h1, h2, h3), :is(.cat-h1, .cat-h2, .cat-h3) { color: $cat-font-color-head; - font-family: $cat-font-family-head, $font-fallback-base, $cat-font-family-emoji, $font-fallback-emoji; + font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji; margin-bottom: calc($cat-head-margin-bottom * var(--cat-article-spacer, 1)); &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + .cat-h1, + .cat-h2, + .cat-h3, + .cat-h4, + .cat-h5, + .cat-h6) { @@ -221,7 +221,7 @@ code { :where(h4, h5, h6), :is(.cat-h4, .cat-h5, .cat-h6) { color: $cat-font-color-head; - font-family: $cat-font-family-head, $font-fallback-base, $cat-font-family-emoji, $font-fallback-emoji; + font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji; margin-bottom: calc($cat-head-margin-bottom * 0.5 * var(--cat-article-spacer, 1)); } diff --git a/core/src/styles/utils/_border.scss b/core/src/styles/utils/_border.scss index 4197645df..201450361 100644 --- a/core/src/styles/utils/_border.scss +++ b/core/src/styles/utils/_border.scss @@ -3,11 +3,11 @@ // ---- Border radius -// @each $size, $_def in $cat-size-border-radius { -// .cat-radius-#{$size} { -// border-radius: cat-border-radius($size); -// } -// } +@each $size, $_def in cat-token('size.border.radius') { + .cat-radius-#{$size} { + border-radius: cat-border-radius($size); + } +} .cat-radius-0 { border-radius: cat-border-radius('0'); @@ -20,29 +20,29 @@ // ---- Border style .cat-border-light { - border: 1px solid $cat-color-ui-border-light; + border: 1px solid cat-token('color.ui.border.light'); } .cat-border { - border: 1px solid $cat-color-ui-border-default; + border: 1px solid cat-token('color.ui.border.default'); } @each $side in top, right, bottom, left { .cat-border-#{$side} { - border-#{$side}: 1px solid $cat-color-ui-border-default; + border-#{$side}: 1px solid cat-token('color.ui.border.default'); &-light { - border-#{$side}: 1px solid $cat-color-ui-border-light; + border-#{$side}: 1px solid cat-token('color.ui.border.light'); } &-dark { - border-#{$side}: 1px solid $cat-color-ui-border-dark; + border-#{$side}: 1px solid cat-token('color.ui.border.dark'); } } } .cat-border-dark { - border: 1px solid $cat-color-ui-border-dark; + border: 1px solid cat-token('color.ui.border.dark'); } .cat-border-none { diff --git a/core/src/styles/utils/_color.scss b/core/src/styles/utils/_color.scss index 6a86d9250..1691335ad 100644 --- a/core/src/styles/utils/_color.scss +++ b/core/src/styles/utils/_color.scss @@ -1,71 +1,71 @@ @use '../variables' as *; -// @each $name, $theme in $cat-color-theme { -// .cat-bg-#{$name} { -// background-color: cat-token('color.theme.#{$name}.bg') !important; -// color: cat-token('color.theme.#{$name}.fill') !important; -// // adjust nested links -// --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)}; -// --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)}; -// --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)}; -// --cat-link-decoration: underline; -// } +@each $name, $theme in cat-token('color.theme') { + .cat-bg-#{$name} { + background-color: cat-token('color.theme.#{$name}.bg') !important; + color: cat-token('color.theme.#{$name}.fill') !important; + // adjust nested links + --cat-primary-text: #{cat-token('color.theme.#{$name}.fill')}; + --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover')}; + --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive')}; + --cat-link-decoration: underline; + } -// .cat-bg-#{$name}-hover { -// transition: -// background-color $cat-time-transition-s, -// color $cat-time-transition-s; + .cat-bg-#{$name}-hover { + transition: + background-color cat-token('time.transition.s'), + color cat-token('time.transition.s'); -// &:hover { -// background-color: cat-token('color.theme.#{$name}.bgHover') !important; -// color: cat-token('color.theme.#{$name}.fillHover') !important; -// // adjust nested links -// --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)}; -// --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)}; -// --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)}; -// --cat-link-decoration: underline; -// } -// } + &:hover { + background-color: cat-token('color.theme.#{$name}.bgHover') !important; + color: cat-token('color.theme.#{$name}.fillHover') !important; + // adjust nested links + --cat-primary-text: #{cat-token('color.theme.#{$name}.fill')}; + --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover')}; + --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive')}; + --cat-link-decoration: underline; + } + } -// .cat-text-#{$name}, -// .cat-link-#{$name} { -// color: cat-token('color.theme.#{$name}.text') !important; -// } + .cat-text-#{$name}, + .cat-link-#{$name} { + color: cat-token('color.theme.#{$name}.text') !important; + } -// .cat-link-#{$name}, -// .cat-text-#{$name}-hover { -// transition: color $cat-time-transition-s; + .cat-link-#{$name}, + .cat-text-#{$name}-hover { + transition: color cat-token('time.transition.s'); -// &:hover { -// color: cat-token('color.theme.#{$name}.text-hover') !important; -// } + &:hover { + color: cat-token('color.theme.#{$name}.textHover') !important; + } -// &:active { -// color: cat-token('color.theme.#{$name}.text-active') !important; -// } -// } -// } + &:active { + color: cat-token('color.theme.#{$name}.textActive') !important; + } + } +} // deprecated .cat-active { - color: $cat-color-theme-primary-text !important; + color: cat-token('color.theme.primary.text') !important; } .cat-text-active { - color: $cat-color-theme-primary-text !important; + color: cat-token('color.theme.primary.text') !important; } // deprecated .cat-muted { - color: $cat-color-ui-font-muted !important; + color: cat-token('color.ui.font.muted') !important; } .cat-text-muted { - color: $cat-color-ui-font-muted !important; + color: cat-token('color.ui.font.muted') !important; } .cat-bg-muted { - background-color: $cat-color-ui-background-muted !important; + background-color: cat-token('color.ui.background.muted') !important; } .cat-text-reset { diff --git a/core/src/styles/utils/_display.scss b/core/src/styles/utils/_display.scss index 6e0e76918..8a0dab503 100644 --- a/core/src/styles/utils/_display.scss +++ b/core/src/styles/utils/_display.scss @@ -9,12 +9,12 @@ $-display-props: none, inline, inline-block, block, grid, flex, inline-flex; } } -// @each $key, $value in $cat-size-screen { -// @include from($key) { -// @each $prop in $-display-props { -// .cat-#{$prop}\:#{$key} { -// display: $prop !important; -// } -// } -// } -// } +@each $key, $value in cat-token('size.screen') { + @include from($key) { + @each $prop in $-display-props { + .cat-#{$prop}\:#{$key} { + display: $prop !important; + } + } + } +} diff --git a/core/src/styles/utils/_layout.scss b/core/src/styles/utils/_layout.scss index 678238ce9..916e7e7b4 100644 --- a/core/src/styles/utils/_layout.scss +++ b/core/src/styles/utils/_layout.scss @@ -36,11 +36,11 @@ // -- Gap -// @each $size, $value in $cat-size-spacing { -// @include -layout-property('gap-#{$size}', 'gap', $value); -// @include -layout-property('gap-x-#{$size}', 'column-gap', $value); -// @include -layout-property('gap-y-#{$size}', 'row-gap', $value); -// } +@each $size, $value in cat-token('size.spacing') { + @include -layout-property('gap-#{$size}', 'gap', $value); + @include -layout-property('gap-x-#{$size}', 'column-gap', $value); + @include -layout-property('gap-y-#{$size}', 'row-gap', $value); +} // -- Alignment diff --git a/core/src/styles/utils/_media.mixins.scss b/core/src/styles/utils/_media.mixins.scss index b2075a8c1..8c901954d 100644 --- a/core/src/styles/utils/_media.mixins.scss +++ b/core/src/styles/utils/_media.mixins.scss @@ -3,15 +3,15 @@ // ---- Responsive @mixin until($size, $media-type: screen) { - // @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) { - // @content; - // } + @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) { + @content; + } } @mixin from($size, $media-type: screen) { - // @media #{$media-type} and (min-width: #{cat-token('size.screen.#{$size}')}) { - // @content; - // } + @media #{$media-type} and (min-width: #{cat-token('size.screen.#{$size}')}) { + @content; + } } // ---- Print diff --git a/core/src/styles/utils/_typography.mixins.scss b/core/src/styles/utils/_typography.mixins.scss index e2da265d2..18429e9a9 100644 --- a/core/src/styles/utils/_typography.mixins.scss +++ b/core/src/styles/utils/_typography.mixins.scss @@ -3,16 +3,14 @@ // ---- Head @function cat-head-font-size($size) { - // @return cat-token('size.font.head.#{$size}'); - @return 1rem; + @return cat-token('size.font.head.#{$size}'); } @function cat-head-line-height($size) { - // @return cat-token('size.line.head.#{$size}'); - @return 1rem; + @return cat-token('size.line.head.#{$size}'); } -@mixin cat-head($size, $weight: $cat-font-weight-head) { +@mixin cat-head($size, $weight: cat-token('font.weight.head')) { // skip color and family, as it is only set for editorial styles font-size: cat-head-font-size($size); line-height: cat-head-line-height($size); @@ -23,16 +21,14 @@ // ---- Body @function cat-body-font-size($size) { - // @return cat-token('size.font.body.#{$size}'); - @return 1rem; + @return cat-token('size.font.body.#{$size}'); } @function cat-body-line-height($size) { - // @return cat-token('size.line.body.#{$size}'); - @return 1rem; + @return cat-token('size.line.body.#{$size}'); } -@mixin cat-body($size, $weight: $cat-font-weight-body) { +@mixin cat-body($size, $weight: cat-token('font.weight.body')) { // skip font family, as it is set on the body // skip color, as it is set on the body font-size: cat-body-font-size($size); @@ -43,20 +39,18 @@ // ---- Mono @function cat-mono-font-family() { - @return $cat-font-family-mono, $font-fallback-monospace; + @return cat-token('font.family.mono'), $font-fallback-monospace; } @function cat-mono-font-size($size) { - // @return cat-token('size.font.mono.#{$size}'); - @return 1rem; + @return cat-token('size.font.mono.#{$size}'); } @function cat-mono-line-height($size) { - // @return cat-token('size.line.mono.#{$size}'); - @return 1rem; + @return cat-token('size.line.mono.#{$size}'); } -@mixin cat-mono($size, $weight: $cat-font-weight-mono) { +@mixin cat-mono($size, $weight: cat-token('font.weight.mono')) { font-family: cat-mono-font-family(); font-size: cat-mono-font-size($size); line-height: cat-mono-line-height($size); diff --git a/core/src/styles/utils/_z-index.mixins.scss b/core/src/styles/utils/_z-index.mixins.scss index e32c4e852..69b67d882 100644 --- a/core/src/styles/utils/_z-index.mixins.scss +++ b/core/src/styles/utils/_z-index.mixins.scss @@ -1,8 +1,7 @@ @use '../variables' as *; @function cat-z-index($key) { - // $base: cat-token('z-index.base'); - // $value: cat-token('z-index.' + $key); - // @return calc($base + $value); - @return 1; + $base: cat-token('z-index.base'); + $value: cat-token('z-index.' + $key); + @return calc($base + $value); } diff --git a/core/src/styles/vendor/_flatpickr.scss b/core/src/styles/vendor/_flatpickr.scss index 6e2d44187..446135f6f 100644 --- a/core/src/styles/vendor/_flatpickr.scss +++ b/core/src/styles/vendor/_flatpickr.scss @@ -1,367 +1,367 @@ -// @use '../variables' as *; -// @use '../mixins' as *; - -// /* stylelint-disable selector-class-pattern */ - -// .flatpickr-calendar { -// @include cat-body(s); -// @include cat-elevation(4); -// border-radius: cat-border-radius('m'); -// border: 1px solid $cat-color-ui-border-default; -// background: $cat-color-ui-background-surface; -// padding: 1rem; - -// &:not(.inline).animate { -// transform: translateY(-1rem); -// opacity: 0; -// transition: -// transform $cat-time-transition-s cubic-bezier(0.3, 0, 0.8, 0.15), -// opacity $cat-time-transition-s cubic-bezier(0.3, 0, 0.8, 0.15); -// } - -// &::before, -// &::after { -// display: none; -// } - -// &.inline, -// &.open { -// display: flex; -// flex-direction: column; -// gap: 1rem; -// width: auto !important; -// } - -// &.inline { -// border: unset; -// padding: 0; -// } - -// &.open { -// z-index: cat-z-index('dropdown'); -// margin-top: 0.75rem; -// margin-left: -0.75rem; - -// &.animate { -// opacity: 1; -// transform: translateY(0); -// transition: -// transform $cat-time-transition-l cubic-bezier(0.05, 0.7, 0.1, 1), -// opacity $cat-time-transition-l cubic-bezier(0.05, 0.7, 0.1, 1); -// } -// } -// } - -// .flatpickr-months { -// gap: 0.25rem; -// } - -// .flatpickr-months .flatpickr-month { -// height: auto; -// } - -// .flatpickr-current-month { -// @include cat-head(4); -// height: 100%; -// padding: 0; -// display: flex; -// position: static; -// width: auto; -// gap: 0.25rem; - -// .flatpickr-monthDropdown-months { -// padding: 0 0.25rem; -// flex: 1; -// margin: unset; -// font-weight: inherit; -// border-radius: cat-border-radius('m'); - -// &:hover, -// &:focus-within { -// background-color: cat-token('color.theme.primary.bg', 0.05); -// } -// } - -// input.cur-year { -// padding: 0; -// font-weight: inherit; -// line-height: 2.25rem; -// } - -// .numInputWrapper { -// width: 7ch; -// } -// } - -// .flatpickr-months .flatpickr-prev-month, -// .flatpickr-months .flatpickr-next-month { -// position: static; -// width: 2.25rem; -// height: 2.25rem; -// padding: 0; -// align-items: center; -// display: flex; -// justify-content: center; -// color: $cat-color-ui-font-muted; - -// &:hover { -// color: $cat-color-ui-font-base; -// } -// } - -// .flatpickr-weekdays { -// height: 2rem; - -// .flatpickr-weekday { -// color: $cat-color-ui-font-muted; -// @include cat-body(xs, 700); -// } -// } - -// .flatpickr-weekwrapper { -// .flatpickr-weekday { -// height: 2rem; -// } - -// .flatpickr-weeks { -// box-shadow: none; -// width: 2rem; -// padding: 0; -// margin-right: 0.5rem; -// background: $cat-color-ui-background-muted; -// border-radius: $cat-size-border-radius-m; -// } - -// span.flatpickr-day, -// span.flatpickr-day:hover { -// @include cat-body(xs, 700); -// color: $cat-color-ui-font-muted; -// text-align: center; -// line-height: 2.25rem; -// } -// } - -// .flatpickr-days { -// width: 15.75rem !important; -// } - -// .dayContainer { -// width: 15.75rem; -// min-width: 15.75rem; -// max-width: 15.75rem; -// } - -// .flatpickr-day { -// color: $cat-color-ui-font-base; -// height: 2.25rem; -// line-height: 2.25rem; -// border: 0; -// border-radius: cat-border-radius('m'); - -// &:hover { -// background-color: $cat-color-ui-background-muted; -// font-weight: 700; -// } - -// &.flatpickr-disabled, -// &.flatpickr-disabled:hover { -// color: $cat-color-ui-font-muted; -// font-weight: inherit; -// background-color: inherit !important; -// } - -// &.today { -// color: $cat-color-theme-primary-text; -// box-shadow: inset 0 0 0 2px $cat-color-theme-primary-text; - -// &:hover, -// &:focus { -// background-color: $cat-color-ui-background-muted; -// color: $cat-color-theme-primary-text; -// } -// } - -// &.flatpickr-disabled, -// &.flatpickr-disabled:hover, -// &.prevMonthDay, -// &.nextMonthDay, -// &.notAllowed, -// &.notAllowed.prevMonthDay, -// &.notAllowed.nextMonthDay { -// color: cat-token('color.ui.font.muted', 0.5); -// } - -// &.selected, -// &.startRange, -// &.endRange { -// &, -// &:hover, -// &:focus, -// &.inRange, -// &.nextMonthDay, -// &.prevMonthDay { -// font-weight: 700; -// background-color: $cat-color-theme-primary-bg !important; -// color: $cat-color-theme-primary-fill !important; -// } -// } - -// &.inRange, -// &.prevMonthDay.inRange, -// &.nextMonthDay.inRange, -// &.today.inRange, -// &.prevMonthDay.today.inRange, -// &.nextMonthDay.today.inRange, -// &:hover, -// &.prevMonthDay:hover, -// &.nextMonthDay:hover, -// &:focus, -// &.prevMonthDay:focus, -// &.nextMonthDay:focus { -// background-color: cat-token('color.theme.primary.bg', 0.1); -// } - -// &.selected.startRange, -// &.startRange.startRange, -// &.endRange.startRange { -// border-top-left-radius: cat-border-radius('m'); -// border-bottom-left-radius: cat-border-radius('m'); -// } - -// &.selected.endRange, -// &.startRange.endRange, -// &.endRange.endRange { -// border-top-right-radius: cat-border-radius('m'); -// border-bottom-right-radius: cat-border-radius('m'); -// } -// } - -// .numInputWrapper { -// padding: 0 1rem 0 0.5rem; -// border-radius: cat-border-radius('m'); - -// &:hover, -// &:focus-within { -// background-color: cat-token('color.theme.primary.bg', 0.05); -// } - -// span { -// border: none; -// background: transparent; -// width: 1rem; -// padding: 0; -// color: $cat-color-ui-font-muted; - -// &.arrowUp::after { -// content: '\2191'; -// align-items: flex-end; -// } - -// &.arrowDown::after { -// content: '\2193'; -// align-items: flex-start; -// } - -// &::after { -// @include cat-body(xs, 700); -// position: static; -// border: 0 !important; -// font-size: 10px; -// display: flex; -// height: 100%; -// justify-content: center; -// } - -// &:hover { -// color: $cat-color-ui-font-base; -// background: transparent; -// } -// } -// } - -// .flatpickr-calendar.hasTime .flatpickr-time { -// border: 1px solid $cat-color-ui-border-default; -// border-radius: $cat-size-border-radius-m; -// min-width: 12rem; -// height: auto; - -// .numInputWrapper { -// height: 2rem; -// padding: 0; -// margin: 0.25rem; -// display: flex; -// } -// } - -// .flatpickr-calendar.hasTime.noCalendar { -// padding: 0; - -// .flatpickr-time { -// border: none; -// } -// } - -// .flatpickr-time .flatpickr-time-separator, -// .flatpickr-time .flatpickr-am-pm { -// margin: 0 0.25rem; -// @include cat-head(4, 400); -// color: $cat-color-ui-font-base; -// line-height: 2.25rem; -// } - -// .flatpickr-time .flatpickr-am-pm { -// width: 25%; -// padding: 0 0.5rem; - -// &:hover, -// &:focus { -// border-radius: cat-border-radius('m'); -// background-color: cat-token('color.theme.primary.bg', 0.05); -// } -// } - -// .flatpickr-time { -// max-height: unset; - -// input { -// background: transparent !important; -// color: $cat-color-ui-font-base; -// font-size: $cat-size-font-body-m; -// line-height: 2.25rem; -// font-family: inherit; - -// &.flatpickr-hour { -// font-weight: inherit; -// } -// } -// } - -// .flatpickr-day.inRange:not(.today), -// .flatpickr-day.week.selected { -// box-shadow: none; -// } - -// .flatpickr-day.inRange, -// .flatpickr-day.week.selected { -// &:nth-child(7n + 1) { -// border-top-left-radius: cat-border-radius('m'); -// border-bottom-left-radius: cat-border-radius('m'); -// } - -// &:nth-child(7n + 7) { -// border-top-right-radius: cat-border-radius('m'); -// border-bottom-right-radius: cat-border-radius('m'); -// } -// } - -// .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), -// .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), -// .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { -// box-shadow: none; -// } - -// .flatpickr-day.selected.startRange.endRange, -// .flatpickr-day.startRange.startRange.endRange, -// .flatpickr-day.endRange.startRange.endRange { -// border-radius: cat-border-radius('m'); -// } +@use '../variables' as *; +@use '../mixins' as *; + +/* stylelint-disable selector-class-pattern */ + +.flatpickr-calendar { + @include cat-body(s); + @include cat-elevation(4); + border-radius: cat-border-radius('m'); + border: 1px solid cat-token('color.ui.border.default'); + background: cat-token('color.ui.background.surface'); + padding: 1rem; + + &:not(.inline).animate { + transform: translateY(-1rem); + opacity: 0; + transition: + transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15), + opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15); + } + + &::before, + &::after { + display: none; + } + + &.inline, + &.open { + display: flex; + flex-direction: column; + gap: 1rem; + width: auto !important; + } + + &.inline { + border: unset; + padding: 0; + } + + &.open { + z-index: cat-z-index('dropdown'); + margin-top: 0.75rem; + margin-left: -0.75rem; + + &.animate { + opacity: 1; + transform: translateY(0); + transition: + transform cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1), + opacity cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1); + } + } +} + +.flatpickr-months { + gap: 0.25rem; +} + +.flatpickr-months .flatpickr-month { + height: auto; +} + +.flatpickr-current-month { + @include cat-head(4); + height: 100%; + padding: 0; + display: flex; + position: static; + width: auto; + gap: 0.25rem; + + .flatpickr-monthDropdown-months { + padding: 0 0.25rem; + flex: 1; + margin: unset; + font-weight: inherit; + border-radius: cat-border-radius('m'); + + &:hover, + &:focus-within { + // background-color: cat-token('color.theme.primary.bg', 0.05); + } + } + + input.cur-year { + padding: 0; + font-weight: inherit; + line-height: 2.25rem; + } + + .numInputWrapper { + width: 7ch; + } +} + +.flatpickr-months .flatpickr-prev-month, +.flatpickr-months .flatpickr-next-month { + position: static; + width: 2.25rem; + height: 2.25rem; + padding: 0; + align-items: center; + display: flex; + justify-content: center; + color: cat-token('color.ui.font.muted'); + + &:hover { + color: cat-token('color.ui.font.base'); + } +} + +.flatpickr-weekdays { + height: 2rem; + + .flatpickr-weekday { + color: cat-token('color.ui.font.muted'); + @include cat-body(xs, 700); + } +} + +.flatpickr-weekwrapper { + .flatpickr-weekday { + height: 2rem; + } + + .flatpickr-weeks { + box-shadow: none; + width: 2rem; + padding: 0; + margin-right: 0.5rem; + background: cat-token('color.ui.background.muted'); + border-radius: cat-token('size.border.radius.m'); + } + + span.flatpickr-day, + span.flatpickr-day:hover { + @include cat-body(xs, 700); + color: cat-token('color.ui.font.muted'); + text-align: center; + line-height: 2.25rem; + } +} + +.flatpickr-days { + width: 15.75rem !important; +} + +.dayContainer { + width: 15.75rem; + min-width: 15.75rem; + max-width: 15.75rem; +} + +.flatpickr-day { + color: cat-token('color.ui.font.base'); + height: 2.25rem; + line-height: 2.25rem; + border: 0; + border-radius: cat-border-radius('m'); + + &:hover { + background-color: cat-token('color.ui.background.muted'); + font-weight: 700; + } + + &.flatpickr-disabled, + &.flatpickr-disabled:hover { + color: cat-token('color.ui.font.muted'); + font-weight: inherit; + background-color: inherit !important; + } + + &.today { + color: cat-token('color.theme.primary.text'); + box-shadow: inset 0 0 0 2px cat-token('color.theme.primary.text'); + + &:hover, + &:focus { + background-color: cat-token('color.ui.background.muted'); + color: cat-token('color.theme.primary.text'); + } + } + + &.flatpickr-disabled, + &.flatpickr-disabled:hover, + &.prevMonthDay, + &.nextMonthDay, + &.notAllowed, + &.notAllowed.prevMonthDay, + &.notAllowed.nextMonthDay { + // color: cat-token('color.ui.font.muted', 0.5); + } + + &.selected, + &.startRange, + &.endRange { + &, + &:hover, + &:focus, + &.inRange, + &.nextMonthDay, + &.prevMonthDay { + font-weight: 700; + background-color: cat-token('color.theme.primary.bg') !important; + color: cat-token('color.theme.primary.fill') !important; + } + } + + &.inRange, + &.prevMonthDay.inRange, + &.nextMonthDay.inRange, + &.today.inRange, + &.prevMonthDay.today.inRange, + &.nextMonthDay.today.inRange, + &:hover, + &.prevMonthDay:hover, + &.nextMonthDay:hover, + &:focus, + &.prevMonthDay:focus, + &.nextMonthDay:focus { + // background-color: cat-token('color.theme.primary.bg', 0.1); + } + + &.selected.startRange, + &.startRange.startRange, + &.endRange.startRange { + border-top-left-radius: cat-border-radius('m'); + border-bottom-left-radius: cat-border-radius('m'); + } + + &.selected.endRange, + &.startRange.endRange, + &.endRange.endRange { + border-top-right-radius: cat-border-radius('m'); + border-bottom-right-radius: cat-border-radius('m'); + } +} + +.numInputWrapper { + padding: 0 1rem 0 0.5rem; + border-radius: cat-border-radius('m'); + + &:hover, + &:focus-within { + // background-color: cat-token('color.theme.primary.bg', 0.05); + } + + span { + border: none; + background: transparent; + width: 1rem; + padding: 0; + color: cat-token('color.ui.font.muted'); + + &.arrowUp::after { + content: '\2191'; + align-items: flex-end; + } + + &.arrowDown::after { + content: '\2193'; + align-items: flex-start; + } + + &::after { + @include cat-body(xs, 700); + position: static; + border: 0 !important; + font-size: 10px; + display: flex; + height: 100%; + justify-content: center; + } + + &:hover { + color: cat-token('color.ui.font.base'); + background: transparent; + } + } +} + +.flatpickr-calendar.hasTime .flatpickr-time { + border: 1px solid cat-token('color.ui.border.default'); + border-radius: cat-token('size.border.radius.m'); + min-width: 12rem; + height: auto; + + .numInputWrapper { + height: 2rem; + padding: 0; + margin: 0.25rem; + display: flex; + } +} + +.flatpickr-calendar.hasTime.noCalendar { + padding: 0; + + .flatpickr-time { + border: none; + } +} + +.flatpickr-time .flatpickr-time-separator, +.flatpickr-time .flatpickr-am-pm { + margin: 0 0.25rem; + @include cat-head(4, 400); + color: cat-token('color.ui.font.base'); + line-height: 2.25rem; +} + +.flatpickr-time .flatpickr-am-pm { + width: 25%; + padding: 0 0.5rem; + + &:hover, + &:focus { + border-radius: cat-border-radius('m'); + // background-color: cat-token('color.theme.primary.bg', 0.05); + } +} + +.flatpickr-time { + max-height: unset; + + input { + background: transparent !important; + color: cat-token('color.ui.font.base'); + font-size: cat-token('size.font.body.m'); + line-height: 2.25rem; + font-family: inherit; + + &.flatpickr-hour { + font-weight: inherit; + } + } +} + +.flatpickr-day.inRange:not(.today), +.flatpickr-day.week.selected { + box-shadow: none; +} + +.flatpickr-day.inRange, +.flatpickr-day.week.selected { + &:nth-child(7n + 1) { + border-top-left-radius: cat-border-radius('m'); + border-bottom-left-radius: cat-border-radius('m'); + } + + &:nth-child(7n + 7) { + border-top-right-radius: cat-border-radius('m'); + border-bottom-right-radius: cat-border-radius('m'); + } +} + +.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), +.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), +.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { + box-shadow: none; +} + +.flatpickr-day.selected.startRange.endRange, +.flatpickr-day.startRange.startRange.endRange, +.flatpickr-day.endRange.startRange.endRange { + border-radius: cat-border-radius('m'); +} From 34e4501a7dffcf65f299227a15d710dfe18d2d1c Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Thu, 15 Aug 2024 09:36:32 +0200 Subject: [PATCH 5/9] chore: cleanup --- .../src/lib/dialog/dialog.component.scss | 2 +- .../directives/angular-component-lib/utils.ts | 8 +- .../lib/directives/boolean-value-accessor.ts | 3 +- .../catalyst/src/lib/directives/proxies.ts | 802 +++++++++++++++--- .../src/lib/directives/value-accessor.ts | 9 +- 5 files changed, 681 insertions(+), 143 deletions(-) diff --git a/angular/projects/catalyst/src/lib/dialog/dialog.component.scss b/angular/projects/catalyst/src/lib/dialog/dialog.component.scss index 1bfc982ea..ddccd2eab 100644 --- a/angular/projects/catalyst/src/lib/dialog/dialog.component.scss +++ b/angular/projects/catalyst/src/lib/dialog/dialog.component.scss @@ -5,7 +5,7 @@ @include cdk.overlay(); .cat-backdrop { - //transition-duration: cat-token('time.transition.l'); + transition-duration: cat-token('time.transition.l'); } .cat-dialog-pane { diff --git a/angular/projects/catalyst/src/lib/directives/angular-component-lib/utils.ts b/angular/projects/catalyst/src/lib/directives/angular-component-lib/utils.ts index b75904879..d573656b9 100644 --- a/angular/projects/catalyst/src/lib/directives/angular-component-lib/utils.ts +++ b/angular/projects/catalyst/src/lib/directives/angular-component-lib/utils.ts @@ -4,7 +4,7 @@ import { fromEvent } from 'rxjs'; export const proxyInputs = (Cmp: any, inputs: string[]) => { const Prototype = Cmp.prototype; - inputs.forEach((item) => { + inputs.forEach(item => { Object.defineProperty(Prototype, item, { get() { return this.el[item]; @@ -19,14 +19,14 @@ export const proxyInputs = (Cmp: any, inputs: string[]) => { * we set configurable: true to indicate these * properties can be changed. */ - configurable: true, + configurable: true }); }); }; export const proxyMethods = (Cmp: any, methods: string[]) => { const Prototype = Cmp.prototype; - methods.forEach((methodName) => { + methods.forEach(methodName => { Prototype[methodName] = function () { const args = arguments; return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args)); @@ -35,7 +35,7 @@ export const proxyMethods = (Cmp: any, methods: string[]) => { }; export const proxyOutputs = (instance: any, el: any, events: string[]) => { - events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName))); + events.forEach(eventName => (instance[eventName] = fromEvent(el, eventName))); }; export const defineCustomElement = (tagName: string, customElement: any) => { diff --git a/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts index e516792c0..bdf4057f1 100644 --- a/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts +++ b/angular/projects/catalyst/src/lib/directives/boolean-value-accessor.ts @@ -22,6 +22,7 @@ export class BooleanValueAccessor extends ValueAccessor { super(el); } writeValue(value: any) { - this.el.nativeElement.checked = this.lastValue = value == null ? false : value; + this.el.nativeElement.checked = this.lastValue = + this.el.nativeElement.value == null ? value : this.el.nativeElement.value === value; } } diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts index 753c219bf..ea7133926 100644 --- a/angular/projects/catalyst/src/lib/directives/proxies.ts +++ b/angular/projects/catalyst/src/lib/directives/proxies.ts @@ -6,7 +6,6 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils'; import { Components } from '@haiilo/catalyst'; - @ProxyCmp({ inputs: ['color', 'icon', 'noIcon'] }) @@ -15,20 +14,22 @@ import { Components } from '@haiilo/catalyst'; changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'icon', 'noIcon'], + inputs: ['color', 'icon', 'noIcon'] }) export class CatAlert { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatAlert extends Components.CatAlert {} - @ProxyCmp({ inputs: ['icon', 'initials', 'label', 'round', 'size', 'src', 'url', 'urlTarget'] }) @@ -37,20 +38,22 @@ export declare interface CatAlert extends Components.CatAlert {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['icon', 'initials', 'label', 'round', 'size', 'src', 'url', 'urlTarget'], + inputs: ['icon', 'initials', 'label', 'round', 'size', 'src', 'url', 'urlTarget'] }) export class CatAvatar { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatAvatar extends Components.CatAvatar {} - @ProxyCmp({ inputs: ['color', 'pulse', 'round', 'size', 'variant'] }) @@ -59,22 +62,47 @@ export declare interface CatAvatar extends Components.CatAvatar {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'pulse', 'round', 'size', 'variant'], + inputs: ['color', 'pulse', 'round', 'size', 'variant'] }) export class CatBadge { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatBadge extends Components.CatBadge {} - @ProxyCmp({ - inputs: ['a11yCurrent', 'a11yLabel', 'active', 'buttonGroupPosition', 'buttonId', 'color', 'disabled', 'icon', 'iconOnly', 'iconRight', 'loading', 'name', 'nativeAttributes', 'nativeContentAttributes', 'noEllipsis', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant'], + inputs: [ + 'a11yCurrent', + 'a11yLabel', + 'active', + 'buttonGroupPosition', + 'buttonId', + 'color', + 'disabled', + 'icon', + 'iconOnly', + 'iconRight', + 'loading', + 'name', + 'nativeAttributes', + 'nativeContentAttributes', + 'noEllipsis', + 'round', + 'size', + 'submit', + 'url', + 'urlTarget', + 'value', + 'variant' + ], methods: ['doFocus', 'doBlur', 'doClick'] }) @Component({ @@ -82,18 +110,44 @@ export declare interface CatBadge extends Components.CatBadge {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yCurrent', 'a11yLabel', 'active', 'buttonGroupPosition', 'buttonId', 'color', 'disabled', 'icon', 'iconOnly', 'iconRight', 'loading', 'name', 'nativeAttributes', 'nativeContentAttributes', 'noEllipsis', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant'], + inputs: [ + 'a11yCurrent', + 'a11yLabel', + 'active', + 'buttonGroupPosition', + 'buttonId', + 'color', + 'disabled', + 'icon', + 'iconOnly', + 'iconRight', + 'loading', + 'name', + 'nativeAttributes', + 'nativeContentAttributes', + 'noEllipsis', + 'round', + 'size', + 'submit', + 'url', + 'urlTarget', + 'value', + 'variant' + ] }) export class CatButton { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catClick', 'catFocus', 'catBlur']); } } - export declare interface CatButton extends Components.CatButton { /** * Emitted when the button is clicked. @@ -109,7 +163,6 @@ export declare interface CatButton extends Components.CatButton { catBlur: EventEmitter>; } - @ProxyCmp({ inputs: ['a11yLabel'] }) @@ -118,39 +171,43 @@ export declare interface CatButton extends Components.CatButton { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel'], + inputs: ['a11yLabel'] }) export class CatButtonGroup { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatButtonGroup extends Components.CatButtonGroup {} - -@ProxyCmp({ -}) +@ProxyCmp({}) @Component({ selector: 'cat-card', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [], + inputs: [] }) export class CatCard { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catLoad']); } } - export declare interface CatCard extends Components.CatCard { /** * Emitted when the card and all the children are fully loaded. @@ -158,9 +215,23 @@ export declare interface CatCard extends Components.CatCard { catLoad: EventEmitter>; } - @ProxyCmp({ - inputs: ['checked', 'disabled', 'hint', 'identifier', 'indeterminate', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'noValue', 'required', 'resolvedValue', 'value'], + inputs: [ + 'checked', + 'disabled', + 'hint', + 'identifier', + 'indeterminate', + 'label', + 'labelHidden', + 'labelLeft', + 'name', + 'nativeAttributes', + 'noValue', + 'required', + 'resolvedValue', + 'value' + ], methods: ['doFocus', 'doBlur'] }) @Component({ @@ -168,18 +239,36 @@ export declare interface CatCard extends Components.CatCard { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['checked', 'disabled', 'hint', 'identifier', 'indeterminate', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'noValue', 'required', 'resolvedValue', 'value'], + inputs: [ + 'checked', + 'disabled', + 'hint', + 'identifier', + 'indeterminate', + 'label', + 'labelHidden', + 'labelLeft', + 'name', + 'nativeAttributes', + 'noValue', + 'required', + 'resolvedValue', + 'value' + ] }) export class CatCheckbox { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatCheckbox extends Components.CatCheckbox { /** * Emitted when the checked status of the checkbox is changed. @@ -195,9 +284,33 @@ export declare interface CatCheckbox extends Components.CatCheckbox { catBlur: EventEmitter>; } - @ProxyCmp({ - inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'name', 'nativeAttributes', 'placeholder', 'placement', 'readonly', 'required', 'requiredMarker', 'textPrefix', 'textSuffix', 'value'], + inputs: [ + 'autoComplete', + 'clearable', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'icon', + 'iconRight', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'min', + 'name', + 'nativeAttributes', + 'placeholder', + 'placement', + 'readonly', + 'required', + 'requiredMarker', + 'textPrefix', + 'textSuffix', + 'value' + ], methods: ['doFocus', 'doBlur', 'clear'] }) @Component({ @@ -205,18 +318,46 @@ export declare interface CatCheckbox extends Components.CatCheckbox { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'name', 'nativeAttributes', 'placeholder', 'placement', 'readonly', 'required', 'requiredMarker', 'textPrefix', 'textSuffix', 'value'], + inputs: [ + 'autoComplete', + 'clearable', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'icon', + 'iconRight', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'min', + 'name', + 'nativeAttributes', + 'placeholder', + 'placement', + 'readonly', + 'required', + 'requiredMarker', + 'textPrefix', + 'textSuffix', + 'value' + ] }) export class CatDate { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatDate extends Components.CatDate { /** * Emitted when the value is changed. @@ -232,9 +373,23 @@ export declare interface CatDate extends Components.CatDate { catBlur: EventEmitter>; } - @ProxyCmp({ - inputs: ['a11yLabel', 'hint', 'identifier', 'label', 'labelHidden', 'max', 'min', 'noClear', 'noToday', 'range', 'required', 'requiredMarker', 'value', 'weeks'], + inputs: [ + 'a11yLabel', + 'hint', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'min', + 'noClear', + 'noToday', + 'range', + 'required', + 'requiredMarker', + 'value', + 'weeks' + ], methods: ['select', 'clear', 'resetView', 'doFocus'] }) @Component({ @@ -242,18 +397,36 @@ export declare interface CatDate extends Components.CatDate { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel', 'hint', 'identifier', 'label', 'labelHidden', 'max', 'min', 'noClear', 'noToday', 'range', 'required', 'requiredMarker', 'value', 'weeks'], + inputs: [ + 'a11yLabel', + 'hint', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'min', + 'noClear', + 'noToday', + 'range', + 'required', + 'requiredMarker', + 'value', + 'weeks' + ] }) export class CatDateInline { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange']); } } - export declare interface CatDateInline extends Components.CatDateInline { /** * Emitted when the value is changed. @@ -261,9 +434,37 @@ export declare interface CatDateInline extends Components.CatDateInline { catChange: EventEmitter>; } - @ProxyCmp({ - inputs: ['attachToElement', 'autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'mode', 'name', 'nativeAttributes', 'nativePickerAttributes', 'placeholder', 'position', 'readonly', 'required', 'requiredMarker', 'step', 'textPrefix', 'textSuffix', 'value'], + inputs: [ + 'attachToElement', + 'autoComplete', + 'clearable', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'icon', + 'iconRight', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'min', + 'mode', + 'name', + 'nativeAttributes', + 'nativePickerAttributes', + 'placeholder', + 'position', + 'readonly', + 'required', + 'requiredMarker', + 'step', + 'textPrefix', + 'textSuffix', + 'value' + ], methods: ['doFocus', 'doBlur'] }) @Component({ @@ -271,18 +472,50 @@ export declare interface CatDateInline extends Components.CatDateInline { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['attachToElement', 'autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'mode', 'name', 'nativeAttributes', 'nativePickerAttributes', 'placeholder', 'position', 'readonly', 'required', 'requiredMarker', 'step', 'textPrefix', 'textSuffix', 'value'], + inputs: [ + 'attachToElement', + 'autoComplete', + 'clearable', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'icon', + 'iconRight', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'min', + 'mode', + 'name', + 'nativeAttributes', + 'nativePickerAttributes', + 'placeholder', + 'position', + 'readonly', + 'required', + 'requiredMarker', + 'step', + 'textPrefix', + 'textSuffix', + 'value' + ] }) export class CatDatepicker { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatDatepicker extends Components.CatDatepicker { /** * Emitted when the value is changed. @@ -298,7 +531,6 @@ export declare interface CatDatepicker extends Components.CatDatepicker { catBlur: EventEmitter>; } - @ProxyCmp({ inputs: ['disabled', 'max', 'min', 'mode', 'nativePickerAttributes', 'readonly', 'step', 'value'] }) @@ -307,18 +539,21 @@ export declare interface CatDatepicker extends Components.CatDatepicker { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['disabled', 'max', 'min', 'mode', 'nativePickerAttributes', 'readonly', 'step', 'value'], + inputs: ['disabled', 'max', 'min', 'mode', 'nativePickerAttributes', 'readonly', 'step', 'value'] }) export class CatDatepickerInline { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange']); } } - export declare interface CatDatepickerInline extends Components.CatDatepickerInline { /** * Emitted when the value is changed. @@ -326,7 +561,6 @@ export declare interface CatDatepickerInline extends Components.CatDatepickerInl catChange: EventEmitter>; } - @ProxyCmp({ inputs: ['arrowNavigation', 'noAutoClose', 'noInitialFocus', 'noResize', 'noReturnFocus', 'overflow', 'placement'], methods: ['toggle', 'open', 'close'] @@ -336,18 +570,21 @@ export declare interface CatDatepickerInline extends Components.CatDatepickerInl changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['arrowNavigation', 'noAutoClose', 'noInitialFocus', 'noResize', 'noReturnFocus', 'overflow', 'placement'], + inputs: ['arrowNavigation', 'noAutoClose', 'noInitialFocus', 'noResize', 'noReturnFocus', 'overflow', 'placement'] }) export class CatDropdown { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catOpen', 'catClose']); } } - export declare interface CatDropdown extends Components.CatDropdown { /** * Emitted when the dropdown is opened. @@ -359,7 +596,6 @@ export declare interface CatDropdown extends Components.CatDropdown { catClose: EventEmitter>; } - @ProxyCmp({ inputs: ['horizontal', 'labelSize', 'requiredMarker'] }) @@ -368,20 +604,22 @@ export declare interface CatDropdown extends Components.CatDropdown { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['horizontal', 'labelSize', 'requiredMarker'], + inputs: ['horizontal', 'labelSize', 'requiredMarker'] }) export class CatFormGroup { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatFormGroup extends Components.CatFormGroup {} - @ProxyCmp({ inputs: ['a11yLabel', 'icon', 'iconSrc', 'size'] }) @@ -390,22 +628,53 @@ export declare interface CatFormGroup extends Components.CatFormGroup {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel', 'icon', 'iconSrc', 'size'], + inputs: ['a11yLabel', 'icon', 'iconSrc', 'size'] }) export class CatIcon { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatIcon extends Components.CatIcon {} - @ProxyCmp({ - inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'maxLength', 'min', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'round', 'textPrefix', 'textSuffix', 'togglePassword', 'type', 'value'], + inputs: [ + 'autoComplete', + 'clearable', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'icon', + 'iconRight', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'maxLength', + 'min', + 'minLength', + 'name', + 'nativeAttributes', + 'placeholder', + 'readonly', + 'required', + 'requiredMarker', + 'round', + 'textPrefix', + 'textSuffix', + 'togglePassword', + 'type', + 'value' + ], methods: ['doFocus', 'doBlur', 'clear', 'mask'] }) @Component({ @@ -413,18 +682,50 @@ export declare interface CatIcon extends Components.CatIcon {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'maxLength', 'min', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'round', 'textPrefix', 'textSuffix', 'togglePassword', 'type', 'value'], + inputs: [ + 'autoComplete', + 'clearable', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'icon', + 'iconRight', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'maxLength', + 'min', + 'minLength', + 'name', + 'nativeAttributes', + 'placeholder', + 'readonly', + 'required', + 'requiredMarker', + 'round', + 'textPrefix', + 'textSuffix', + 'togglePassword', + 'type', + 'value' + ] }) export class CatInput { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatInput extends Components.CatInput { /** * Emitted when the value is changed. @@ -440,27 +741,51 @@ export declare interface CatInput extends Components.CatInput { catBlur: EventEmitter>; } - @ProxyCmp({ - inputs: ['activePadding', 'compact', 'iconNext', 'iconPrev', 'page', 'pageCount', 'round', 'sidePadding', 'size', 'variant'] + inputs: [ + 'activePadding', + 'compact', + 'iconNext', + 'iconPrev', + 'page', + 'pageCount', + 'round', + 'sidePadding', + 'size', + 'variant' + ] }) @Component({ selector: 'cat-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['activePadding', 'compact', 'iconNext', 'iconPrev', 'page', 'pageCount', 'round', 'sidePadding', 'size', 'variant'], + inputs: [ + 'activePadding', + 'compact', + 'iconNext', + 'iconPrev', + 'page', + 'pageCount', + 'round', + 'sidePadding', + 'size', + 'variant' + ] }) export class CatPagination { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange']); } } - export declare interface CatPagination extends Components.CatPagination { /** * Emitted when the page of the pagination has changed. @@ -468,9 +793,20 @@ export declare interface CatPagination extends Components.CatPagination { catChange: EventEmitter>; } - @ProxyCmp({ - inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value'], + inputs: [ + 'checked', + 'disabled', + 'hint', + 'identifier', + 'label', + 'labelHidden', + 'labelLeft', + 'name', + 'nativeAttributes', + 'required', + 'value' + ], methods: ['doFocus', 'doBlur'] }) @Component({ @@ -478,18 +814,33 @@ export declare interface CatPagination extends Components.CatPagination { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'required', 'value'], + inputs: [ + 'checked', + 'disabled', + 'hint', + 'identifier', + 'label', + 'labelHidden', + 'labelLeft', + 'name', + 'nativeAttributes', + 'required', + 'value' + ] }) export class CatRadio { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatRadio extends Components.CatRadio { /** * Emitted when the radio is changed. @@ -505,7 +856,6 @@ export declare interface CatRadio extends Components.CatRadio { catBlur: EventEmitter>; } - @ProxyCmp({ inputs: ['a11yLabel', 'disabled', 'labelLeft', 'name', 'value'] }) @@ -514,18 +864,21 @@ export declare interface CatRadio extends Components.CatRadio { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel', 'disabled', 'labelLeft', 'name', 'value'], + inputs: ['a11yLabel', 'disabled', 'labelLeft', 'name', 'value'] }) export class CatRadioGroup { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatRadioGroup extends Components.CatRadioGroup { /** * Emitted when the value is changed. @@ -541,7 +894,6 @@ export declare interface CatRadioGroup extends Components.CatRadioGroup { catBlur: EventEmitter>; } - @ProxyCmp({ inputs: ['noOverflowX', 'noOverflowY', 'noOverscroll', 'noScrolledInit', 'noShadowX', 'noShadowY', 'scrolledBuffer'] }) @@ -550,18 +902,21 @@ export declare interface CatRadioGroup extends Components.CatRadioGroup { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['noOverflowX', 'noOverflowY', 'noOverscroll', 'noScrolledInit', 'noShadowX', 'noShadowY', 'scrolledBuffer'], + inputs: ['noOverflowX', 'noOverflowY', 'noOverscroll', 'noScrolledInit', 'noShadowX', 'noShadowY', 'scrolledBuffer'] }) export class CatScrollable { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['scrolledTop', 'scrolledLeft', 'scrolledRight', 'scrolledBottom']); } } - export declare interface CatScrollable extends Components.CatScrollable { /** * Emitted when the content is fully scrolled to the top. @@ -581,9 +936,30 @@ export declare interface CatScrollable extends Components.CatScrollable { scrolledBottom: EventEmitter>; } - @ProxyCmp({ - inputs: ['clearable', 'debounce', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'identifier', 'label', 'labelHidden', 'multiple', 'name', 'nativeAttributes', 'noItems', 'placeholder', 'placement', 'required', 'requiredMarker', 'tagHint', 'tags', 'value'], + inputs: [ + 'clearable', + 'debounce', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'identifier', + 'label', + 'labelHidden', + 'multiple', + 'name', + 'nativeAttributes', + 'noItems', + 'placeholder', + 'placement', + 'required', + 'requiredMarker', + 'tagHint', + 'tags', + 'value' + ], methods: ['doFocus', 'doBlur', 'clear', 'connect'] }) @Component({ @@ -591,18 +967,43 @@ export declare interface CatScrollable extends Components.CatScrollable { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['clearable', 'debounce', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'identifier', 'label', 'labelHidden', 'multiple', 'name', 'nativeAttributes', 'noItems', 'placeholder', 'placement', 'required', 'requiredMarker', 'tagHint', 'tags', 'value'], + inputs: [ + 'clearable', + 'debounce', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'identifier', + 'label', + 'labelHidden', + 'multiple', + 'name', + 'nativeAttributes', + 'noItems', + 'placeholder', + 'placement', + 'required', + 'requiredMarker', + 'tagHint', + 'tags', + 'value' + ] }) export class CatSelect { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catOpen', 'catClose', 'catChange', 'catBlur']); } } - export declare interface CatSelect extends Components.CatSelect { /** * Emitted when the select dropdown is opened. @@ -622,28 +1023,28 @@ export declare interface CatSelect extends Components.CatSelect { catBlur: EventEmitter>; } - -@ProxyCmp({ -}) +@ProxyCmp({}) @Component({ selector: 'cat-select-demo', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: [], + inputs: [] }) export class CatSelectDemo { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatSelectDemo extends Components.CatSelectDemo {} - @ProxyCmp({ inputs: ['effect', 'lines', 'size', 'variant'] }) @@ -652,20 +1053,22 @@ export declare interface CatSelectDemo extends Components.CatSelectDemo {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['effect', 'lines', 'size', 'variant'], + inputs: ['effect', 'lines', 'size', 'variant'] }) export class CatSkeleton { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatSkeleton extends Components.CatSkeleton {} - @ProxyCmp({ inputs: ['a11yLabel', 'size'] }) @@ -674,20 +1077,22 @@ export declare interface CatSkeleton extends Components.CatSkeleton {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['a11yLabel', 'size'], + inputs: ['a11yLabel', 'size'] }) export class CatSpinner { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatSpinner extends Components.CatSpinner {} - @ProxyCmp({ inputs: ['deactivated', 'error', 'icon', 'iconOnly', 'iconRight', 'label', 'nativeAttributes', 'url', 'urlTarget'] }) @@ -696,18 +1101,21 @@ export declare interface CatSpinner extends Components.CatSpinner {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['deactivated', 'error', 'icon', 'iconOnly', 'iconRight', 'label', 'nativeAttributes', 'url', 'urlTarget'], + inputs: ['deactivated', 'error', 'icon', 'iconOnly', 'iconRight', 'label', 'nativeAttributes', 'url', 'urlTarget'] }) export class CatTab { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catClick']); } } - export declare interface CatTab extends Components.CatTab { /** * Emitted when tab is clicked. @@ -715,7 +1123,6 @@ export declare interface CatTab extends Components.CatTab { catClick: EventEmitter>; } - @ProxyCmp({ inputs: ['activeTab', 'tabsAlign'], methods: ['setActive', 'setActiveIndex'] @@ -725,18 +1132,21 @@ export declare interface CatTab extends Components.CatTab { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['activeTab', 'tabsAlign'], + inputs: ['activeTab', 'tabsAlign'] }) export class CatTabs { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange']); } } - export declare interface CatTabs extends Components.CatTabs { /** * Emitted when active tab is changed. @@ -744,9 +1154,27 @@ export declare interface CatTabs extends Components.CatTabs { catChange: EventEmitter>; } - @ProxyCmp({ - inputs: ['disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'identifier', 'label', 'labelHidden', 'maxLength', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'rows', 'value'], + inputs: [ + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'identifier', + 'label', + 'labelHidden', + 'maxLength', + 'minLength', + 'name', + 'nativeAttributes', + 'placeholder', + 'readonly', + 'required', + 'requiredMarker', + 'rows', + 'value' + ], methods: ['doFocus', 'doBlur', 'clear'] }) @Component({ @@ -754,18 +1182,40 @@ export declare interface CatTabs extends Components.CatTabs { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'identifier', 'label', 'labelHidden', 'maxLength', 'minLength', 'name', 'nativeAttributes', 'placeholder', 'readonly', 'required', 'requiredMarker', 'rows', 'value'], + inputs: [ + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'identifier', + 'label', + 'labelHidden', + 'maxLength', + 'minLength', + 'name', + 'nativeAttributes', + 'placeholder', + 'readonly', + 'required', + 'requiredMarker', + 'rows', + 'value' + ] }) export class CatTextarea { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatTextarea extends Components.CatTextarea { /** * Emitted when the value is changed. @@ -781,9 +1231,34 @@ export declare interface CatTextarea extends Components.CatTextarea { catBlur: EventEmitter>; } - @ProxyCmp({ - inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'name', 'nativeAttributes', 'placeholder', 'placement', 'readonly', 'required', 'requiredMarker', 'step', 'textPrefix', 'textSuffix', 'value'], + inputs: [ + 'autoComplete', + 'clearable', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'icon', + 'iconRight', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'min', + 'name', + 'nativeAttributes', + 'placeholder', + 'placement', + 'readonly', + 'required', + 'requiredMarker', + 'step', + 'textPrefix', + 'textSuffix', + 'value' + ], methods: ['select', 'doFocus', 'doBlur', 'clear'] }) @Component({ @@ -791,18 +1266,47 @@ export declare interface CatTextarea extends Components.CatTextarea { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autoComplete', 'clearable', 'disabled', 'errorUpdate', 'errors', 'hint', 'horizontal', 'icon', 'iconRight', 'identifier', 'label', 'labelHidden', 'max', 'min', 'name', 'nativeAttributes', 'placeholder', 'placement', 'readonly', 'required', 'requiredMarker', 'step', 'textPrefix', 'textSuffix', 'value'], + inputs: [ + 'autoComplete', + 'clearable', + 'disabled', + 'errorUpdate', + 'errors', + 'hint', + 'horizontal', + 'icon', + 'iconRight', + 'identifier', + 'label', + 'labelHidden', + 'max', + 'min', + 'name', + 'nativeAttributes', + 'placeholder', + 'placement', + 'readonly', + 'required', + 'requiredMarker', + 'step', + 'textPrefix', + 'textSuffix', + 'value' + ] }) export class CatTime { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatTime extends Components.CatTime { /** * Emitted when the value is changed. @@ -818,9 +1322,22 @@ export declare interface CatTime extends Components.CatTime { catBlur: EventEmitter>; } - @ProxyCmp({ - inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'noValue', 'required', 'resolvedValue', 'value'], + inputs: [ + 'checked', + 'disabled', + 'hint', + 'identifier', + 'label', + 'labelHidden', + 'labelLeft', + 'name', + 'nativeAttributes', + 'noValue', + 'required', + 'resolvedValue', + 'value' + ], methods: ['doFocus', 'doBlur'] }) @Component({ @@ -828,18 +1345,35 @@ export declare interface CatTime extends Components.CatTime { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['checked', 'disabled', 'hint', 'identifier', 'label', 'labelHidden', 'labelLeft', 'name', 'nativeAttributes', 'noValue', 'required', 'resolvedValue', 'value'], + inputs: [ + 'checked', + 'disabled', + 'hint', + 'identifier', + 'label', + 'labelHidden', + 'labelLeft', + 'name', + 'nativeAttributes', + 'noValue', + 'required', + 'resolvedValue', + 'value' + ] }) export class CatToggle { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']); } } - export declare interface CatToggle extends Components.CatToggle { /** * Emitted when the checked status of the toggle is changed. @@ -855,7 +1389,6 @@ export declare interface CatToggle extends Components.CatToggle { catBlur: EventEmitter>; } - @ProxyCmp({ inputs: ['content', 'disabled', 'hideDelay', 'longTouchDuration', 'placement', 'round', 'showDelay', 'size'] }) @@ -864,17 +1397,18 @@ export declare interface CatToggle extends Components.CatToggle { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['content', 'disabled', 'hideDelay', 'longTouchDuration', 'placement', 'round', 'showDelay', 'size'], + inputs: ['content', 'disabled', 'hideDelay', 'longTouchDuration', 'placement', 'round', 'showDelay', 'size'] }) export class CatTooltip { protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + constructor( + c: ChangeDetectorRef, + r: ElementRef, + protected z: NgZone + ) { c.detach(); this.el = r.nativeElement; } } - export declare interface CatTooltip extends Components.CatTooltip {} - - diff --git a/angular/projects/catalyst/src/lib/directives/value-accessor.ts b/angular/projects/catalyst/src/lib/directives/value-accessor.ts index 6bb76a6d3..f67457de0 100644 --- a/angular/projects/catalyst/src/lib/directives/value-accessor.ts +++ b/angular/projects/catalyst/src/lib/directives/value-accessor.ts @@ -3,9 +3,12 @@ import { ControlValueAccessor } from '@angular/forms'; @Directive({}) export class ValueAccessor implements ControlValueAccessor { - - private onChange: (value: any) => void = () => {/**/}; - private onTouched: () => void = () => {/**/}; + private onChange: (value: any) => void = () => { + /**/ + }; + private onTouched: () => void = () => { + /**/ + }; protected lastValue: any; constructor(protected el: ElementRef) {} From 27366133e55b573be35997cafeef3ef1928388b1 Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Thu, 15 Aug 2024 09:46:00 +0200 Subject: [PATCH 6/9] chore: cleanup --- core/src/styles/_variables.scss | 2 +- core/src/styles/core/_typography.scss | 40 ++++----- core/src/styles/fonts/_fonts.mixins.lato.scss | 72 ++++++++-------- core/src/styles/utils/_disabled.mixins.scss | 2 +- core/src/styles/utils/_spacing.scss | 86 +++++++++---------- core/src/styles/utils/_typography.mixins.scss | 6 +- tokens/config.js | 25 +++--- 7 files changed, 116 insertions(+), 117 deletions(-) diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss index 812d5884c..ee7e40b07 100644 --- a/core/src/styles/_variables.scss +++ b/core/src/styles/_variables.scss @@ -52,7 +52,7 @@ $cat-nav-padding-horizontal: 0.75rem; // -- Typography // -------- -$cat-mark-color: red; //cat-token('color.theme.primary.bg', 0.2); +$cat-mark-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 20%, transparent); /* stylelint-disable value-keyword-case */ $font-fallback-base: system-ui, diff --git a/core/src/styles/core/_typography.scss b/core/src/styles/core/_typography.scss index 6854675f5..28a03b017 100644 --- a/core/src/styles/core/_typography.scss +++ b/core/src/styles/core/_typography.scss @@ -8,26 +8,26 @@ } // -- head styles -// @each $key, $value in $cat-size-font-head { -// :where(h#{$key}), -// .cat-h#{$key} { -// @include cat-head($key); -// } -// } - -// // -- body styles -// @each $key, $value in $cat-size-font-body { -// .cat-text-#{$key} { -// @include cat-body($key); -// } -// } - -// // -- mono styles -// @each $key, $value in $cat-size-font-mono { -// .cat-mono-#{$key} { -// @include cat-mono($key); -// } -// } +@each $key, $value in cat-token('size.font.head') { + :where(h#{$key}), + .cat-h#{$key} { + @include cat-head($key); + } +} + +// -- body styles +@each $key, $value in cat-token('size.font.body') { + .cat-text-#{$key} { + @include cat-body($key); + } +} + +// -- mono styles +@each $key, $value in cat-token('size.font.mono') { + .cat-mono-#{$key} { + @include cat-mono($key); + } +} hr, .cat-hr { diff --git a/core/src/styles/fonts/_fonts.mixins.lato.scss b/core/src/styles/fonts/_fonts.mixins.lato.scss index 9c4d04a86..355e25f9f 100644 --- a/core/src/styles/fonts/_fonts.mixins.lato.scss +++ b/core/src/styles/fonts/_fonts.mixins.lato.scss @@ -6,8 +6,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-hairline}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-hairline}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Hairline")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffHairline")}') format('woff'); font-style: normal; font-weight: 100; text-rendering: optimizeLegibility; @@ -16,8 +16,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-hairline-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-hairline-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2HairlineItalic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffHairlineItalic")}') format('woff'); font-style: italic; font-weight: 100; text-rendering: optimizeLegibility; @@ -28,8 +28,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-thin}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-thin}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Thin")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffThin")}') format('woff'); font-style: normal; font-weight: 200; text-rendering: optimizeLegibility; @@ -38,8 +38,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-thin-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-thin-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2ThinItalic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffThinItalic")}') format('woff'); font-style: italic; font-weight: 200; text-rendering: optimizeLegibility; @@ -50,8 +50,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-light}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-light}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Light")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffLight")}') format('woff'); font-style: normal; font-weight: 300; text-rendering: optimizeLegibility; @@ -60,8 +60,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-light-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-light-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2LightItalic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffLightItalic")}') format('woff'); font-style: italic; font-weight: 300; text-rendering: optimizeLegibility; @@ -72,8 +72,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-regular}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-regular}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Regular")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffRegular")}') format('woff'); font-style: normal; font-weight: 400; text-rendering: optimizeLegibility; @@ -82,8 +82,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Italic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffItalic")}') format('woff'); font-style: italic; font-weight: 400; text-rendering: optimizeLegibility; @@ -94,8 +94,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-medium}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-medium}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Medium")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffMedium")}') format('woff'); font-style: normal; font-weight: 500; text-rendering: optimizeLegibility; @@ -104,8 +104,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-medium-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-medium-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2MediumItalic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffMediumItalic")}') format('woff'); font-style: italic; font-weight: 500; text-rendering: optimizeLegibility; @@ -116,8 +116,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-semibold}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-semibold}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Semibold")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffSemibold")}') format('woff'); font-style: normal; font-weight: 600; text-rendering: optimizeLegibility; @@ -126,8 +126,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-semibold-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-semibold-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2SemiboldItalic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffSemiboldItalic")}') format('woff'); font-style: italic; font-weight: 600; text-rendering: optimizeLegibility; @@ -138,8 +138,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-bold}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-bold}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Bold")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffBold")}') format('woff'); font-style: normal; font-weight: 700; text-rendering: optimizeLegibility; @@ -148,8 +148,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-bold-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-bold-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2BoldItalic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffBoldItalic")}') format('woff'); font-style: italic; font-weight: 700; text-rendering: optimizeLegibility; @@ -160,8 +160,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-heavy}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-heavy}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Heavy")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffHeavy")}') format('woff'); font-style: normal; font-weight: 800; text-rendering: optimizeLegibility; @@ -170,8 +170,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-heavy-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-heavy-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2HeavyItalic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffHeavyItalic")}') format('woff'); font-style: italic; font-weight: 800; text-rendering: optimizeLegibility; @@ -182,8 +182,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-black}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-black}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2Black")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffBlack")}') format('woff'); font-style: normal; font-weight: 900; text-rendering: optimizeLegibility; @@ -192,8 +192,8 @@ @font-face { font-family: Lato; src: - url('#{$path}/#{$cat-asset-font-lato-woff2-black-italic}') format('woff2'), - url('#{$path}/#{$cat-asset-font-lato-woff-black-italic}') format('woff'); + url('#{$path}/#{cat-token("asset.font.lato.woff2BlackItalic")}') format('woff2'), + url('#{$path}/#{cat-token("asset.font.lato.woffBlackItalic")}') format('woff'); font-style: italic; font-weight: 900; text-rendering: optimizeLegibility; diff --git a/core/src/styles/utils/_disabled.mixins.scss b/core/src/styles/utils/_disabled.mixins.scss index 7a1ed82e9..8d749ca9d 100644 --- a/core/src/styles/utils/_disabled.mixins.scss +++ b/core/src/styles/utils/_disabled.mixins.scss @@ -2,5 +2,5 @@ @mixin cat-disabled() { cursor: not-allowed; - opacity: $cat-opacity-disabled; + opacity: cat-token('opacity.disabled'); } diff --git a/core/src/styles/utils/_spacing.scss b/core/src/styles/utils/_spacing.scss index 336ede074..ccd7d1770 100644 --- a/core/src/styles/utils/_spacing.scss +++ b/core/src/styles/utils/_spacing.scss @@ -1,48 +1,48 @@ @use 'sass:map'; @use '../variables' as *; -// $-spacings: map.merge( -// ( -// 'auto': auto, -// '0': 0 -// ), -// $cat-size-spacing -// ); +$-spacings: map.merge( + ( + 'auto': auto, + '0': 0 + ), + cat-token('size.spacing') +); -// @each $name, $spacing in $-spacings { -// .cat-m-#{$name} { -// margin: $spacing !important; -// } -// .cat-mv-#{$name} { -// margin-top: $spacing !important; -// margin-bottom: $spacing !important; -// } -// .cat-mh-#{$name} { -// margin-left: $spacing !important; -// margin-right: $spacing !important; -// } -// @each $dir in (top, bottom, left, right) { -// .cat-m#{str-slice($dir, 0, 1)}-#{$name} { -// margin-#{$dir}: $spacing !important; -// } -// } +@each $name, $spacing in $-spacings { + .cat-m-#{$name} { + margin: $spacing !important; + } + .cat-mv-#{$name} { + margin-top: $spacing !important; + margin-bottom: $spacing !important; + } + .cat-mh-#{$name} { + margin-left: $spacing !important; + margin-right: $spacing !important; + } + @each $dir in (top, bottom, left, right) { + .cat-m#{str-slice($dir, 0, 1)}-#{$name} { + margin-#{$dir}: $spacing !important; + } + } -// @if $spacing != auto { -// .cat-p-#{$name} { -// padding: $spacing !important; -// } -// .cat-pv-#{$name} { -// padding-top: $spacing !important; -// padding-bottom: $spacing !important; -// } -// .cat-ph-#{$name} { -// padding-left: $spacing !important; -// padding-right: $spacing !important; -// } -// @each $dir in (top, bottom, left, right) { -// .cat-p#{str-slice($dir, 0, 1)}-#{$name} { -// padding-#{$dir}: $spacing !important; -// } -// } -// } -// } + @if $spacing != auto { + .cat-p-#{$name} { + padding: $spacing !important; + } + .cat-pv-#{$name} { + padding-top: $spacing !important; + padding-bottom: $spacing !important; + } + .cat-ph-#{$name} { + padding-left: $spacing !important; + padding-right: $spacing !important; + } + @each $dir in (top, bottom, left, right) { + .cat-p#{str-slice($dir, 0, 1)}-#{$name} { + padding-#{$dir}: $spacing !important; + } + } + } +} diff --git a/core/src/styles/utils/_typography.mixins.scss b/core/src/styles/utils/_typography.mixins.scss index 18429e9a9..3b28f18d5 100644 --- a/core/src/styles/utils/_typography.mixins.scss +++ b/core/src/styles/utils/_typography.mixins.scss @@ -22,9 +22,9 @@ @function cat-body-font-size($size) { @return cat-token('size.font.body.#{$size}'); - } - - @function cat-body-line-height($size) { +} + +@function cat-body-line-height($size) { @return cat-token('size.line.body.#{$size}'); } diff --git a/tokens/config.js b/tokens/config.js index 518491ab6..fa6793fba 100644 --- a/tokens/config.js +++ b/tokens/config.js @@ -54,19 +54,18 @@ module.exports = { format: 'typescript/es6-declarations', }] }, - // cssHex: { - // transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css'], - // prefix: 'cat', - // buildPath: 'dist/css/', - // files: [{ - // destination: 'variables-hex.css', - // format: 'css/variables', - // options: { - // fileHeader: 'cat/header', - // outputReferences: false - // } - // }] - // }, + cssHex: { + transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css'], + prefix: 'cat', + buildPath: 'dist/css/', + files: [{ + destination: 'variables.css', + format: 'css/variables', + options: { + outputReferences: true + } + }] + }, scss: { transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'cat/cssProp', 'cat/scssPrivate'], prefix: 'cat', From 6a2c908788e8ac8072e4e441f1a3871bf63f980e Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Thu, 15 Aug 2024 22:06:50 +0200 Subject: [PATCH 7/9] chore: cleanup --- core/src/styles/core/_dialog.scss | 2 +- core/src/styles/vendor/_flatpickr.scss | 10 +++---- pnpm-lock.yaml | 39 -------------------------- 3 files changed, 6 insertions(+), 45 deletions(-) diff --git a/core/src/styles/core/_dialog.scss b/core/src/styles/core/_dialog.scss index 8586e80cb..c2671212e 100644 --- a/core/src/styles/core/_dialog.scss +++ b/core/src/styles/core/_dialog.scss @@ -17,7 +17,7 @@ $-dialog-padding: 1.5rem; .cat-backdrop { - // background-color: #{cat-token('color.ui.background.backdrop', cat-token('opacity.backdrop'))}; + background-color: color-mix(in srgb, #{cat-token('color.ui.background.backdrop')} #{cat-token('opacity.backdrop')}, transparent); } .cat-dialog { diff --git a/core/src/styles/vendor/_flatpickr.scss b/core/src/styles/vendor/_flatpickr.scss index 446135f6f..fed3921f7 100644 --- a/core/src/styles/vendor/_flatpickr.scss +++ b/core/src/styles/vendor/_flatpickr.scss @@ -78,7 +78,7 @@ &:hover, &:focus-within { - // background-color: cat-token('color.theme.primary.bg', 0.05); + background-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 5%, transparent); } } @@ -188,7 +188,7 @@ &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay { - // color: cat-token('color.ui.font.muted', 0.5); + color: color-mix(in srgb, #{cat-token('color.ui.font.muted')} 5%, transparent); } &.selected, @@ -218,7 +218,7 @@ &:focus, &.prevMonthDay:focus, &.nextMonthDay:focus { - // background-color: cat-token('color.theme.primary.bg', 0.1); + background-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 10%, transparent); } &.selected.startRange, @@ -242,7 +242,7 @@ &:hover, &:focus-within { - // background-color: cat-token('color.theme.primary.bg', 0.05); + background-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 5%, transparent); } span { @@ -316,7 +316,7 @@ &:hover, &:focus { border-radius: cat-border-radius('m'); - // background-color: cat-token('color.theme.primary.bg', 0.05); + background-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 5%, transparent); } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 81797ce9c..1bcfc414d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -109,45 +109,6 @@ importers: specifier: ~4.6.3 version: 4.6.4 - angular/dist/catalyst: - dependencies: - '@angular/cdk': - specifier: '>=14.0.0' - version: 14.2.7(@angular/common@14.3.0(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(rxjs@7.8.1))(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(rxjs@7.8.1) - '@angular/core': - specifier: '>=14.0.0' - version: 14.3.0(rxjs@7.8.1)(zone.js@0.11.8) - '@haiilo/catalyst': - specifier: workspace:* - version: link:../../../core - '@haiilo/catalyst-tokens': - specifier: workspace:* - version: link:../../../tokens - loglevel: - specifier: 1.8.1 - version: 1.8.1 - rxjs: - specifier: ^6.5.3 || ^7.4.0 - version: 7.8.1 - tslib: - specifier: ^2.3.0 - version: 2.6.2 - - angular/dist/catalyst-formly: - dependencies: - '@angular/core': - specifier: ^14.0.0 || ^15.0.0 || ^16.0.0 - version: 14.3.0(rxjs@7.8.1)(zone.js@0.11.8) - '@haiilo/catalyst-angular': - specifier: workspace:* - version: link:../../projects/catalyst - '@ngx-formly/core': - specifier: ^6.0.0 - version: 6.3.0(@angular/forms@14.3.0(@angular/common@14.3.0(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(rxjs@7.8.1))(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(@angular/platform-browser@14.3.0(@angular/animations@14.3.0(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8)))(@angular/common@14.3.0(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(rxjs@7.8.1))(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8)))(rxjs@7.8.1))(rxjs@7.8.1) - tslib: - specifier: ^2.3.0 - version: 2.6.2 - angular/projects/catalyst: dependencies: '@angular/cdk': From d61b556dd5b6fc5d3195d659681c6e881aedef51 Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Fri, 16 Aug 2024 09:39:57 +0200 Subject: [PATCH 8/9] chore: cleanup --- pnpm-lock.yaml | 24 ++++++++++++------------ tokens/config.js | 13 +++++++++++-- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1bcfc414d..cece7b441 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,7 +10,7 @@ importers: devDependencies: '@commitlint/cli': specifier: ^19.0.3 - version: 19.3.0(@types/node@20.14.2)(typescript@5.4.5) + version: 19.4.0(@types/node@20.14.2)(typescript@5.4.5) '@commitlint/config-conventional': specifier: ^19.0.3 version: 19.2.2 @@ -1159,8 +1159,8 @@ packages: resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} engines: {node: '>=0.1.90'} - '@commitlint/cli@19.3.0': - resolution: {integrity: sha512-LgYWOwuDR7BSTQ9OLZ12m7F/qhNY+NpAyPBgo4YNMkACE7lGuUnuQq1yi9hz1KA4+3VqpOYl8H1rY/LYK43v7g==} + '@commitlint/cli@19.4.0': + resolution: {integrity: sha512-sJX4J9UioVwZHq7JWM9tjT5bgWYaIN3rC4FP7YwfEwBYiIO+wMyRttRvQLNkow0vCdM0D67r9NEWU0Ui03I4Eg==} engines: {node: '>=v18'} hasBin: true @@ -1192,8 +1192,8 @@ packages: resolution: {integrity: sha512-xrzMmz4JqwGyKQKTpFzlN0dx0TAiT7Ran1fqEBgEmEj+PU98crOFtysJgY+QdeSagx6EDRigQIXJVnfrI0ratA==} engines: {node: '>=v18'} - '@commitlint/load@19.2.0': - resolution: {integrity: sha512-XvxxLJTKqZojCxaBQ7u92qQLFMMZc4+p9qrIq/9kJDy8DOrEa7P1yx7Tjdc2u2JxIalqT4KOGraVgCE7eCYJyQ==} + '@commitlint/load@19.4.0': + resolution: {integrity: sha512-I4lCWaEZYQJ1y+Y+gdvbGAx9pYPavqZAZ3/7/8BpWh+QjscAn8AjsUpLV2PycBsEx7gupq5gM4BViV9xwTIJuw==} engines: {node: '>=v18'} '@commitlint/message@19.0.0': @@ -1204,8 +1204,8 @@ packages: resolution: {integrity: sha512-Il+tNyOb8VDxN3P6XoBBwWJtKKGzHlitEuXA5BP6ir/3loWlsSqDr5aecl6hZcC/spjq4pHqNh0qPlfeWu38QA==} engines: {node: '>=v18'} - '@commitlint/read@19.2.1': - resolution: {integrity: sha512-qETc4+PL0EUv7Q36lJbPG+NJiBOGg7SSC7B5BsPWOmei+Dyif80ErfWQ0qXoW9oCh7GTpTNRoaVhiI8RbhuaNw==} + '@commitlint/read@19.4.0': + resolution: {integrity: sha512-r95jLOEZzKDakXtnQub+zR3xjdnrl2XzerPwm7ch1/cc5JGq04tyaNpa6ty0CRCWdVrk4CZHhqHozb8yZwy2+g==} engines: {node: '>=v18'} '@commitlint/resolve-extends@19.1.0': @@ -9738,12 +9738,12 @@ snapshots: '@colors/colors@1.5.0': {} - '@commitlint/cli@19.3.0(@types/node@20.14.2)(typescript@5.4.5)': + '@commitlint/cli@19.4.0(@types/node@20.14.2)(typescript@5.4.5)': dependencies: '@commitlint/format': 19.3.0 '@commitlint/lint': 19.2.2 - '@commitlint/load': 19.2.0(@types/node@20.14.2)(typescript@5.4.5) - '@commitlint/read': 19.2.1 + '@commitlint/load': 19.4.0(@types/node@20.14.2)(typescript@5.4.5) + '@commitlint/read': 19.4.0 '@commitlint/types': 19.0.3 execa: 8.0.1 yargs: 17.7.2 @@ -9789,7 +9789,7 @@ snapshots: '@commitlint/rules': 19.0.3 '@commitlint/types': 19.0.3 - '@commitlint/load@19.2.0(@types/node@20.14.2)(typescript@5.4.5)': + '@commitlint/load@19.4.0(@types/node@20.14.2)(typescript@5.4.5)': dependencies: '@commitlint/config-validator': 19.0.3 '@commitlint/execute-rule': 19.0.0 @@ -9813,7 +9813,7 @@ snapshots: conventional-changelog-angular: 7.0.0 conventional-commits-parser: 5.0.0 - '@commitlint/read@19.2.1': + '@commitlint/read@19.4.0': dependencies: '@commitlint/top-level': 19.0.0 '@commitlint/types': 19.0.3 diff --git a/tokens/config.js b/tokens/config.js index fa6793fba..561990911 100644 --- a/tokens/config.js +++ b/tokens/config.js @@ -24,6 +24,15 @@ StyleDictionary.registerTransform({ transformer: token => `var(--cat-${token.cssProp}, ${token.value})` }); + +StyleDictionary.registerTransform({ + type: 'value', + name: 'opacity/percent', + transitive: true, + matcher: token => token.$type === 'opacity', + transformer: token => token.value * 100 + '%' +}); + StyleDictionary.registerTransform({ type: 'name', name: 'cat/scssPrivate', @@ -55,7 +64,7 @@ module.exports = { }] }, cssHex: { - transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css'], + transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/hex', 'opacity/percent'], prefix: 'cat', buildPath: 'dist/css/', files: [{ @@ -67,7 +76,7 @@ module.exports = { }] }, scss: { - transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'cat/cssProp', 'cat/scssPrivate'], + transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'opacity/percent', 'cat/cssProp', 'cat/scssPrivate'], prefix: 'cat', buildPath: 'dist/scss/', files: [{ From e10f551ced57d79fa188e4d24045d71a9f468163 Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Fri, 16 Aug 2024 09:41:53 +0200 Subject: [PATCH 9/9] chore: lint --- core/src/styles/core/_dialog.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/core/src/styles/core/_dialog.scss b/core/src/styles/core/_dialog.scss index c2671212e..c7ee7abcc 100644 --- a/core/src/styles/core/_dialog.scss +++ b/core/src/styles/core/_dialog.scss @@ -17,7 +17,11 @@ $-dialog-padding: 1.5rem; .cat-backdrop { - background-color: color-mix(in srgb, #{cat-token('color.ui.background.backdrop')} #{cat-token('opacity.backdrop')}, transparent); + background-color: color-mix( + in srgb, + #{cat-token('color.ui.background.backdrop')} #{cat-token('opacity.backdrop')}, + transparent + ); } .cat-dialog {