From 5b1858f507421833cbcb0f150c7c41c2fc57499f Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Thu, 16 May 2024 14:30:11 +0100 Subject: [PATCH] Update design tokens d.ts --- .../lib/themes/aura/autocomplete/index.d.ts | 114 ++++++++++++++++++ .../lib/themes/aura/inputtext/index.d.ts | 37 +++--- components/lib/themes/aura/ripple/index.d.ts | 36 ++++++ components/lib/themes/aura/ripple/index.js | 8 +- components/lib/themes/lara/ripple/index.js | 8 +- components/lib/themes/nora/ripple/index.js | 8 +- 6 files changed, 182 insertions(+), 29 deletions(-) diff --git a/components/lib/themes/aura/autocomplete/index.d.ts b/components/lib/themes/aura/autocomplete/index.d.ts index e69de29bb..284aa0d0d 100644 --- a/components/lib/themes/aura/autocomplete/index.d.ts +++ b/components/lib/themes/aura/autocomplete/index.d.ts @@ -0,0 +1,114 @@ +/** + * + * AutoComplete is an input component that provides real-time suggestions while being typed. + * + * [Live Demo](https://www.primevue.org/autocomplete/) + * + * @module aura/autocomplete + * + */ +import { ColorSchemeDesignToken } from '..'; + +/** + * **PrimeVue - AutoComplete** + * + * _AutoComplete is an input component that provides real-time suggestions while being typed._ + * + * [Live Demo](https://www.primevue.org/autocomplete/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group DesignTokens + * + */ +export interface AutoCompleteDesignTokens extends ColorSchemeDesignToken { + /** + * Used to pass tokens of the root section + */ + root: { + background?: string; + disabledBackground?: string; + filledBackground?: string; + filledFocusBackground?: string; + borderColor?: string; + hoverBorderColor?: string; + focusBorderColor?: string; + invalidBorderColor?: string; + color?: string; + disabledColor?: string; + placeholderColor?: string; + shadow?: string; + paddingX?: string; + paddingY?: string; + borderRadius?: string; + focusRing: { + width?: string; + style?: string; + color?: string; + offset?: string; + shadow?: string; + }; + }; + overlay: { + background?: string; + borderColor?: string; + borderRadius?: string; + color?: string; + shadow?: string; + }; + list: { + padding?: string; + gap?: string; + }; + option: { + focusBackground?: string; + selectedBackground?: string; + selectedFocusBackground?: string; + color?: string; + focusColor?: string; + selectedColor?: string; + selectedFocusColor?: string; + padding?: string; + borderRadius?: string; + }; + optionGroup: { + background?: string; + color?: string; + fontWeight?: string; + padding?: string; + }; + dropdown: { + width?: string; + borderColor?: string; + hoverBorderColor?: string; + activeBorderColor?: string; + borderRadius?: string; + focusRing: { + width?: string; + style?: string; + color?: string; + offset?: string; + shadow?: string; + }; + background?: string; + hoverBackground?: string; + /** + * + * @designToken autocomplete.dropdown.active.background + */ + activeBackground?: string; + color?: string; + hoverColor?: string; + activeColor?: string; + }; + chip: { + borderRadius?: string; + }; + emptyMessage: { + /** + * + * @designToken autocomplete.empty.message.padding + */ + padding?: string; + }; +} diff --git a/components/lib/themes/aura/inputtext/index.d.ts b/components/lib/themes/aura/inputtext/index.d.ts index ea2cc3977..ae3bccacf 100644 --- a/components/lib/themes/aura/inputtext/index.d.ts +++ b/components/lib/themes/aura/inputtext/index.d.ts @@ -10,13 +10,22 @@ import { ColorSchemeDesignToken } from '..'; /** - * Defines all sections of design tokens + * **PrimeVue - InputText** + * + * _InputText renders a text field to enter data._ + * + * [Live Demo](https://www.primevue.org/inputtext/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group DesignTokens + * */ -export namespace InputTextDesignToken { +export interface InputTextDesignTokens extends ColorSchemeDesignToken { /** - * Tokens of the root section + * Used to pass tokens of the root section */ - export interface Root { + root: { /** * Background of an input field * @@ -142,23 +151,5 @@ export namespace InputTextDesignToken { */ shadow?: string; }; - } -} - -/** - * **PrimeVue - InputText** - * - * _InputText renders a text field to enter data._ - * - * [Live Demo](https://www.primevue.org/inputtext/) - * --- --- - * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) - * - * @group DesignTokens - */ -export interface InputTextDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ - root?: InputTextDesignToken.Root; + }; } diff --git a/components/lib/themes/aura/ripple/index.d.ts b/components/lib/themes/aura/ripple/index.d.ts index e69de29bb..496e3d015 100644 --- a/components/lib/themes/aura/ripple/index.d.ts +++ b/components/lib/themes/aura/ripple/index.d.ts @@ -0,0 +1,36 @@ +/** + * + * Ripple directive adds ripple effect to the host element. + * + * [Live Demo](https://primevue.org/ripple) + * + * @module aura/ripple + * + */ +import { ColorSchemeDesignToken } from '..'; + +/** + * **PrimeVue - Ripple** + * + * _Ripple directive adds ripple effect to the host element._ + * + * [Live Demo](https://www.primevue.org/ripple/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group DesignTokens + * + */ +export interface RippleDesignTokens extends ColorSchemeDesignToken { + /** + * Used to pass tokens of the root section + */ + root: { + /** + * Background of ripple + * + * @designToken ripple.background + */ + background?: string; + }; +} diff --git a/components/lib/themes/aura/ripple/index.js b/components/lib/themes/aura/ripple/index.js index 2e9fa078b..024905a64 100644 --- a/components/lib/themes/aura/ripple/index.js +++ b/components/lib/themes/aura/ripple/index.js @@ -1,10 +1,14 @@ export default { colorScheme: { light: { - background: 'rgba(0,0,0,0.1)' + root: { + background: 'rgba(0,0,0,0.1)' + } }, dark: { - background: 'rgba(255,255,255,0.3)' + root: { + background: 'rgba(255,255,255,0.3)' + } } } }; diff --git a/components/lib/themes/lara/ripple/index.js b/components/lib/themes/lara/ripple/index.js index 2e9fa078b..024905a64 100644 --- a/components/lib/themes/lara/ripple/index.js +++ b/components/lib/themes/lara/ripple/index.js @@ -1,10 +1,14 @@ export default { colorScheme: { light: { - background: 'rgba(0,0,0,0.1)' + root: { + background: 'rgba(0,0,0,0.1)' + } }, dark: { - background: 'rgba(255,255,255,0.3)' + root: { + background: 'rgba(255,255,255,0.3)' + } } } }; diff --git a/components/lib/themes/nora/ripple/index.js b/components/lib/themes/nora/ripple/index.js index 5b2453732..2535a280c 100644 --- a/components/lib/themes/nora/ripple/index.js +++ b/components/lib/themes/nora/ripple/index.js @@ -1,10 +1,14 @@ export default { colorScheme: { light: { - background: 'rgba(0,0,0,0.1)' + root: { + background: 'rgba(0,0,0,0.1)' + } }, dark: { - background: 'rgba(255,255,255,0.4)' + root: { + background: 'rgba(255,255,255,0.4)' + } } } };