diff --git a/.gitignore b/.gitignore
index 9276a2c..808f9bd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,6 +52,6 @@ api-generator/typedoc.json
# файлы в этим папках компилятся и должны создаваться при сборке
src/assets/components/themes
-./storybook-static
-./debug-storybook.log
-./documentation.json
+/storybook-static
+/debug-storybook.log
+/documentation.json
diff --git a/angular.json b/angular.json
index 0cbea1d..1552751 100644
--- a/angular.json
+++ b/angular.json
@@ -117,5 +117,8 @@
}
}
}
+ },
+ "cli": {
+ "analytics": false
}
}
\ No newline at end of file
diff --git a/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold.woff2 b/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold.woff2
new file mode 100644
index 0000000..ec67015
Binary files /dev/null and b/src/assets/fonts/tt-fellows/TT_Fellows_DemiBold.woff2 differ
diff --git a/src/assets/fonts/tt-fellows/TT_Fellows_Regular.woff2 b/src/assets/fonts/tt-fellows/TT_Fellows_Regular.woff2
new file mode 100644
index 0000000..c4c6736
Binary files /dev/null and b/src/assets/fonts/tt-fellows/TT_Fellows_Regular.woff2 differ
diff --git a/src/components/button/button-extra.component.ts b/src/components/button/button-extra.component.ts
new file mode 100644
index 0000000..ef68005
--- /dev/null
+++ b/src/components/button/button-extra.component.ts
@@ -0,0 +1,73 @@
+import { Component, Input } from '@angular/core';
+import { Button } from 'primeng/button';
+import { Badge } from 'primeng/badge';
+
+export type ExtraButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text' | 'link';
+export type ExtraButtonSeverity = 'success' | 'warning' | 'danger' | 'info' | null;
+export type ExtraButtonSize = 'small' | 'base' | 'large' | 'xlarge';
+export type ExtraButtonIconPos = 'prefix' | 'postfix' | null;
+
+@Component({
+ selector: 'extra-button',
+ standalone: true,
+ imports: [Button, Badge],
+ styleUrl: './button.component.scss',
+ template: `
+
+ `
+})
+export class ExtraButtonComponent {
+ @Input() label = 'Button';
+ @Input() variant: ExtraButtonVariant = 'primary';
+ @Input() severity: ExtraButtonSeverity = null;
+ @Input() size: ExtraButtonSize = 'base';
+ @Input() rounded = false;
+ @Input() iconPos: ExtraButtonIconPos = null;
+ @Input() iconOnly = false;
+ @Input() icon = '';
+ @Input() disabled = false;
+ @Input() loading = false;
+ @Input() badge = '';
+ @Input() badgeSeverity: 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null = null;
+ @Input() showBadge = false;
+ @Input() fluid = false;
+ @Input() ariaLabel: string | undefined = undefined;
+ @Input() autofocus = false;
+ @Input() tabindex: number | undefined = undefined;
+ @Input() text = false;
+
+ get primeSize(): 'small' | 'large' | undefined {
+ if (this.size === 'small') return 'small';
+ if (this.size === 'large') return 'large';
+ return undefined;
+ }
+
+ get primeIconPos(): 'left' | 'right' {
+ return this.iconPos === 'postfix' ? 'right' : 'left';
+ }
+
+ get primeSeverity(): string | null {
+ if (this.variant === 'secondary') return 'secondary';
+ if (this.severity === 'warning') return 'warn';
+ return this.severity;
+ }
+}
diff --git a/src/components/button/button.component.html b/src/components/button/button.component.html
new file mode 100644
index 0000000..b6a3c33
--- /dev/null
+++ b/src/components/button/button.component.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/components/button/button.component.scss b/src/components/button/button.component.scss
new file mode 100644
index 0000000..0716a2c
--- /dev/null
+++ b/src/components/button/button.component.scss
@@ -0,0 +1,15 @@
+:host ::ng-deep {
+ .p-button {
+ position: relative;
+ overflow: visible;
+
+ .p-badge {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-end: 0;
+ transform: translate(50%, -50%);
+ transform-origin: 100% 0;
+ margin: 0;
+ }
+ }
+}
diff --git a/src/components/button/button.component.spec.ts b/src/components/button/button.component.spec.ts
new file mode 100644
index 0000000..d4ad18e
--- /dev/null
+++ b/src/components/button/button.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+ let component: ButtonComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ButtonComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/components/button/button.component.ts b/src/components/button/button.component.ts
new file mode 100644
index 0000000..c5454f2
--- /dev/null
+++ b/src/components/button/button.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { Button } from 'primeng/button';
+
+/**
+ * как использовать
+ * ```
+ *
+ * content
// это то, на что заменится внутри компонента
+ *
+ *```
+ */
+
+@Component({
+ selector: 'app-button',
+ standalone: true,
+ imports: [Button],
+ templateUrl: './button.component.html',
+ styleUrl: './button.component.scss'
+})
+export class ButtonComponent {
+ @Input() size!: 'small' | undefined | 'large' | 'xlarge';
+
+ @Input() text: boolean = false;
+
+ get innerSize(): 'small' | undefined | 'large' {
+ return (this.size === 'xlarge' || !this.size) ? undefined : (this.size as 'small' | 'large');
+ }
+}
diff --git a/src/prime-preset/map-tokens.ts b/src/prime-preset/map-tokens.ts
index 62ebcb4..5cb6345 100644
--- a/src/prime-preset/map-tokens.ts
+++ b/src/prime-preset/map-tokens.ts
@@ -1,45 +1,15 @@
import { Preset } from '@primeuix/themes/types';
+import type { ComponentsDesignTokens } from '@primeuix/themes/types';
import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
-import primitive from './tokens/primitive-default.json';
-import semantic from './tokens/semantic-default.json';
-import components from './tokens/components-default.json';
-import themeLight from './tokens/theme-light.json';
-import themeDark from './tokens/theme-dark.json';
-import sizingBase from './tokens/sizing-base.json';
-import sizingSm from './tokens/sizing-sm.json';
-import sizingLg from './tokens/sizing-lg.json';
-import sizingXlg from './tokens/sizing-xlg.json';
-
-import button from './tokens/components/button.json';
+import primitive from './tokens/primitive';
+import semantic from './tokens/semantic';
+import components from './tokens/components';
const presetTokens: Preset = {
- primitive,
- semantic,
- components: { ...components, ...button }
+ primitive: primitive as AuraBaseDesignTokens['primitive'],
+ semantic: semantic as unknown as AuraBaseDesignTokens['semantic'],
+ components: components as ComponentsDesignTokens
};
-if (presetTokens?.semantic) {
- presetTokens.semantic.colorScheme = {
- light: themeLight,
- dark: themeDark
- };
-}
-
-presetTokens.semantic = { ...presetTokens.semantic, ...sizingBase };
-
-const semanticLink: Record = presetTokens.semantic;
-
-function applySizing(semantic: Record, sizing: Record, sizeKey: 'sm' | 'lg' | 'xlg') {
- Object.keys(sizing).forEach((key) => {
- if (semantic[key]) {
- semantic[key][sizeKey] = sizing[key]?.root ?? sizing[key];
- }
- });
-}
-
-applySizing(semanticLink, sizingSm, 'sm');
-applySizing(semanticLink, sizingLg, 'lg');
-applySizing(semanticLink, sizingXlg, 'xlg');
-
export default presetTokens;
diff --git a/src/prime-preset/tokens/components-default.json b/src/prime-preset/tokens/components-default.json
deleted file mode 100644
index 5d8c8ce..0000000
--- a/src/prime-preset/tokens/components-default.json
+++ /dev/null
@@ -1,3362 +0,0 @@
-{
- "accordion": {
- "header": {
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "activeColor": "{text.color}",
- "activeHoverColor": "{text.hoverColor}",
- "borderColor": "{transparent}",
- "padding": "1rem 0 1rem 0",
- "fontWeight": "{fonts.fontWeight.bold}",
- "borderRadius": "0",
- "borderWidth": "0 0 0 0",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "inset {focus.ring.shadow}"
- },
- "toggleIcon": {
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "activeColor": "{text.color}",
- "activeHoverColor": "{text.hoverColor}"
- },
- "last": {
- "bottomBorderRadius": "{content.borderRadius}",
- "activeBottomBorderRadius": "0"
- },
- "first": {
- "borderWidth": "0",
- "topBorderRadius": "{content.borderRadius}"
- }
- },
- "root": {
- "transitionDuration": "{formField.transitionDuration}"
- },
- "panel": {
- "borderWidth": "0.0625rem",
- "borderColor": "{formField.borderColor}"
- },
- "colorScheme": {
- "light": {
- "header": {
- "background": "{transparent}",
- "hoverBackground": "{transparent}",
- "activeBackground": "{transparent}",
- "activeHoverBackground": "{transparent}"
- }
- }
- },
- "content": {
- "borderWidth": "1px 0 0 0",
- "borderColor": "{transparent}",
- "background": "{transparent}",
- "color": "{text.color}",
- "padding": "0 0 1rem 1.75rem"
- }
- },
- "autocomplete": {
- "colorScheme": {
- "light": {
- "chip": {
- "focusBackground": "{chip.colorScheme.light.root.background}",
- "focusColor": "{chip.colorScheme.light.root.color}"
- },
- "dropdown": {
- "background": "{formField.background}",
- "hoverBackground": "{formField.background}",
- "activeBackground": "{formField.background}",
- "color": "{formField.color}",
- "hoverColor": "{formField.color}",
- "activeColor": "{formField.color}"
- }
- }
- },
- "extend": {
- "extOption": {
- "gap": "0.4375rem"
- },
- "extOptionGroup": {
- "gap": "0.4375rem"
- }
- },
- "root": {
- "background": "{formField.background}",
- "disabledBackground": "{formField.disabledBackground}",
- "filledBackground": "{formField.filledBackground}",
- "filledHoverBackground": "{formField.filledHoverBackground}",
- "filledFocusBackground": "{formField.filledFocusBackground}",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.hoverBorderSecondaryColor}",
- "focusBorderColor": "{formField.focusBorderSecondaryColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "color": "{formField.color}",
- "disabledColor": "{formField.disabledColor}",
- "placeholderColor": "{formField.placeholderColor}",
- "invalidPlaceholderColor": "{formField.invalidPlaceholderColor}",
- "shadow": "{formField.shadow}",
- "paddingX": "{formField.paddingX}",
- "paddingY": "{formField.paddingY}",
- "borderRadius": "{formField.borderRadius}",
- "transitionDuration": "{formField.transitionDuration}"
- },
- "overlay": {
- "background": "{overlay.select.background}",
- "borderColor": "{overlay.select.borderColor}",
- "borderRadius": "{overlay.select.borderRadius}",
- "color": "{overlay.select.color}",
- "shadow": "{overlay.select.shadow}"
- },
- "list": {
- "padding": "{list.padding}",
- "gap": "{list.gap}"
- },
- "option": {
- "focusBackground": "{list.option.focusBackground}",
- "selectedBackground": "{list.option.selectedBackground}",
- "selectedFocusBackground": "{list.option.selectedFocusBackground}",
- "color": "{list.option.color}",
- "focusColor": "{list.option.focusColor}",
- "selectedColor": "{list.option.selectedColor}",
- "selectedFocusColor": "{list.option.selectedFocusColor}",
- "padding": "{list.option.padding}",
- "borderRadius": "{list.option.borderRadius}"
- },
- "optionGroup": {
- "background": "{list.optionGroup.background}",
- "color": "{list.optionGroup.color}",
- "fontWeight": "{fonts.fontWeight.demibold}",
- "padding": "{list.optionGroup.padding}"
- },
- "dropdown": {
- "width": "100%",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.hoverBorderSecondaryColor}",
- "activeBorderColor": "{formField.focusBorderSecondaryColor}",
- "borderRadius": "{formField.borderRadius}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.focusRing.shadow}"
- },
- "sm": {
- "width": "1.75rem"
- },
- "lg": {
- "width": "2.625rem"
- }
- },
- "chip": {
- "borderRadius": "{chip.root.borderRadius}"
- },
- "emptyMessage": {
- "padding": "{list.option.padding}"
- }
- },
- "avatar": {
- "extend": {
- "borderColor": "{formField.borderColor}"
- },
- "root": {
- "width": "1.75rem",
- "height": "1.75rem",
- "fontSize": "{fonts.fontSize.base}",
- "color": "{text.extend.colorPrimaryStatic}",
- "background": "{primary.color}",
- "borderRadius": "{borderRadius.md}"
- },
- "icon": {
- "size": "0.875rem"
- },
- "group": {
- "borderColor": "{content.background}",
- "offset": "-0.75rem"
- },
- "lg": {
- "width": "2.1875rem",
- "height": "2.1875rem",
- "fontSize": "{fonts.fontSize.base}",
- "icon": {
- "size": "0.875rem"
- },
- "group": {
- "offset": "-1rem"
- }
- },
- "xl": {
- "width": "3.0625rem",
- "height": "3.0625rem",
- "icon": {
- "size": "1.3125rem"
- },
- "group": {
- "offset": "-1.5rem"
- },
- "fontSize": "{fonts.fontSize.base}"
- }
- },
- "badge": {
- "colorScheme": {
- "light": {
- "primary": {
- "color": "{text.extend.colorPrimaryStatic}",
- "background": "{primary.color}"
- },
- "secondary": {
- "color": "{text.extend.colorInverted}",
- "background": "{surface.900}"
- },
- "success": {
- "color": "{success.900}",
- "background": "{success.300}"
- },
- "info": {
- "color": "{info.900}",
- "background": "{info.300}"
- },
- "warn": {
- "color": "{warn.900}",
- "background": "{warn.300}"
- },
- "danger": {
- "color": "{error.900}",
- "background": "{error.300}"
- }
- }
- },
- "extend": {
- "extDot": {
- "success": {
- "background": "{colors.solid.green.400}"
- },
- "info": {
- "background": "{info.400}"
- },
- "warn": {
- "background": "{warn.400}"
- },
- "danger": {
- "background": "{error.400}"
- },
- "lg": {
- "size": "0.65625rem"
- },
- "xlg": {
- "size": "0.875rem"
- }
- }
- },
- "root": {
- "borderRadius": "{borderRadius.xl}",
- "padding": "0.46875rem",
- "fontSize": "{fonts.fontSize.xs}",
- "fontWeight": "{fonts.fontWeight.regular}",
- "minWidth": "1.3125rem",
- "height": "1.3125rem"
- },
- "dot": {
- "size": "0.4375rem"
- },
- "sm": {
- "fontSize": "{fonts.fontSize.xs}",
- "minWidth": "0",
- "height": "0"
- },
- "lg": {
- "fontSize": "{fonts.fontSize.xs}",
- "minWidth": "1.53125rem",
- "height": "1.53125rem"
- },
- "xl": {
- "fontSize": "{fonts.fontSize.xs}",
- "minWidth": "1.75rem",
- "height": "1.75rem"
- }
- },
- "breadcrumb": {
- "extend": {
- "hoverBackground": "{surface.100}"
- },
- "root": {
- "padding": "0.21875rem",
- "background": "{transparent}",
- "gap": "0",
- "transitionDuration": "{formField.transitionDuration}"
- },
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- },
- "item": {
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "borderRadius": "{borderRadius.xs}",
- "gap": "{navigation.item.gap}",
- "icon": {
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}"
- }
- },
- "separator": {
- "color": "{text.color}"
- }
- },
- "button": {
- "extend": {
- "disabledBackground": "{formField.disabledBackground}",
- "extOutlined": {
- "danger": {
- "focusBackground": "{transparent}"
- },
- "warn": {
- "focusBackground": "{transparent}"
- },
- "info": {
- "focusBackground": "{transparent}"
- },
- "help": {
- "focusBackground": "{transparent}"
- },
- "success": {
- "focusBackground": "{transparent}"
- }
- },
- "disabledColor": "{formField.disabledColor}",
- "extText": {
- "danger": {
- "focusBackground": "{transparent}"
- },
- "warn": {
- "focusBackground": "{transparent}"
- },
- "info": {
- "focusBackground": "{transparent}"
- },
- "help": {
- "focusBackground": "{transparent}"
- },
- "success": {
- "focusBackground": "{transparent}"
- }
- },
- "extLink": {
- "background": "{transparent}",
- "colorHover": "{text.hoverColor}",
- "paddingX": "0",
- "paddingY": "0.21875rem",
- "sm": {
- "iconOnlyWidth": "0.875rem"
- },
- "base": {
- "iconOnlyWidth": "1.34375rem"
- },
- "lg": {
- "iconOnlyWidth": "1.53125rem"
- },
- "xlg": {
- "iconOnlyWidth": "1.75rem"
- }
- },
- "extSm": {
- "borderRadius": "{borderRadius.md}",
- "gap": "0.4375rem"
- },
- "extLg": {
- "borderRadius": "{borderRadius.lg}",
- "gap": "0.65625rem"
- },
- "extXlg": {
- "borderRadius": "{borderRadius.lg}",
- "gap": "0.65625rem",
- "iconOnlyWidth": "3.5625rem",
- "paddingX": "1.3125rem",
- "paddingY": "1.09375rem"
- },
- "borderWidth": "0.0625rem"
- },
- "colorScheme": {
- "light": {
- "root": {
- "primary": {
- "background": "{primary.color}",
- "hoverBackground": "{primary.hoverColor}",
- "activeBackground": "{primary.color}",
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "activeBorderColor": "{transparent}",
- "color": "{text.extend.colorPrimaryStatic}",
- "hoverColor": "{text.extend.colorPrimaryStatic}",
- "activeColor": "{text.extend.colorPrimaryStatic}",
- "focusRing": {
- "color": "{primary.200}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "secondary": {
- "background": "{surface.900}",
- "hoverBackground": "{surface.800}",
- "activeBackground": "{surface.900}",
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "activeBorderColor": "{transparent}",
- "color": "{text.extend.colorInverted}",
- "hoverColor": "{text.extend.colorInverted}",
- "activeColor": "{text.extend.colorInverted}",
- "focusRing": {
- "color": "{primary.200}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "contrast": {
- "background": "{surface.200}",
- "hoverBackground": "{surface.300}",
- "activeBackground": "{surface.200}",
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "activeBorderColor": "{transparent}",
- "color": "{text.color}",
- "hoverColor": "{text.color}",
- "activeColor": "{text.color}",
- "focusRing": {
- "color": "{primary.200}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "info": {
- "background": "{info.300}",
- "hoverBackground": "{info.400}",
- "activeBackground": "{info.300}",
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "activeBorderColor": "{transparent}",
- "color": "{info.900}",
- "hoverColor": "{info.950}",
- "activeColor": "{info.900}"
- },
- "success": {
- "background": "{success.300}",
- "hoverBackground": "{success.400}",
- "activeBackground": "{success.300}",
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "activeBorderColor": "{transparent}",
- "color": "{success.900}",
- "hoverColor": "{success.950}",
- "activeColor": "{success.900}"
- },
- "warn": {
- "background": "{warn.300}",
- "hoverBackground": "{warn.400}",
- "activeBackground": "{warn.300}",
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "activeBorderColor": "{transparent}",
- "color": "{warn.900}",
- "hoverColor": "{warn.950}",
- "activeColor": "{warn.900}"
- },
- "help": {
- "background": "{help.300}",
- "hoverBackground": "{help.400}",
- "activeBackground": "{help.300}",
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "activeBorderColor": "{transparent}",
- "color": "{help.900}",
- "hoverColor": "{help.950}",
- "activeColor": "{help.900}"
- },
- "danger": {
- "background": "{error.300}",
- "hoverBackground": "{error.400}",
- "activeBackground": "{error.300}",
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "activeBorderColor": "{transparent}",
- "color": "{error.900}",
- "hoverColor": "{error.950}",
- "activeColor": "{error.900}"
- }
- },
- "outlined": {
- "primary": {
- "hoverBackground": "{primary.50}",
- "activeBackground": "{primary.100}",
- "borderColor": "{primary.200}",
- "color": "{colors.solid.green.500}"
- },
- "success": {
- "hoverBackground": "{success.100}",
- "activeBackground": "{transparent}",
- "borderColor": "{success.600}",
- "color": "{success.600}"
- },
- "info": {
- "hoverBackground": "{info.100}",
- "activeBackground": "{transparent}",
- "borderColor": "{info.600}",
- "color": "{info.600}"
- },
- "warn": {
- "hoverBackground": "{warn.100}",
- "activeBackground": "{transparent}",
- "borderColor": "{warn.600}",
- "color": "{warn.600}"
- },
- "help": {
- "hoverBackground": "{help.100}",
- "activeBackground": "{transparent}",
- "borderColor": "{help.600}",
- "color": "{help.600}"
- },
- "danger": {
- "hoverBackground": "{error.100}",
- "activeBackground": "{transparent}",
- "borderColor": "{error.600}",
- "color": "{error.600}"
- }
- },
- "text": {
- "primary": {
- "hoverBackground": "{surface.100}",
- "activeBackground": "{transparent}",
- "color": "{text.color}"
- },
- "success": {
- "hoverBackground": "{success.100}",
- "activeBackground": "{transparent}",
- "color": "{success.600}"
- },
- "info": {
- "hoverBackground": "{info.100}",
- "activeBackground": "{transparent}",
- "color": "{info.600}"
- },
- "warn": {
- "hoverBackground": "{warn.100}",
- "activeBackground": "{transparent}",
- "color": "{warn.600}"
- },
- "help": {
- "hoverBackground": "{help.100}",
- "activeBackground": "{transparent}",
- "color": "{help.600}"
- },
- "danger": {
- "hoverBackground": "{error.100}",
- "activeBackground": "{transparent}",
- "color": "{error.600}"
- }
- },
- "link": {
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "activeColor": "{text.color}"
- }
- }
- },
- "root": {
- "borderRadius": "{borderRadius.md}",
- "roundedBorderRadius": "1.75rem",
- "gap": "0.4375rem",
- "paddingX": "0.875rem",
- "paddingY": "0.4375rem",
- "iconOnlyWidth": "2.1875rem",
- "raisedShadow": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
- "badgeSize": "1rem",
- "transitionDuration": "{formField.transitionDuration}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "offset": "{focusRing.offset}"
- },
- "sm": {
- "fontSize": "{fonts.fontSize.sm}",
- "iconOnlyWidth": "1.75rem",
- "paddingX": "0.65625rem",
- "paddingY": "0.4375rem"
- },
- "lg": {
- "fontSize": "{fonts.fontSize.xl}",
- "iconOnlyWidth": "3.125rem",
- "paddingX": "1.3125rem",
- "paddingY": "0.875rem"
- },
- "label": {
- "fontWeight": "{fonts.fontWeight.demibold}"
- }
- }
- },
- "card": {
- "extend": {
- "borderColor": "{content.borderColor}"
- },
- "root": {
- "background": "{content.background}",
- "borderRadius": "{borderRadius.lg}",
- "color": "{content.color}",
- "shadow": "0 .125rem .25rem rgba(0,0,0,.075)"
- },
- "body": {
- "padding": "0.875rem",
- "gap": "0.875rem"
- },
- "caption": {
- "gap": "0.21875rem"
- },
- "title": {
- "fontSize": "{fonts.fontSize.lg}",
- "fontWeight": "{fonts.fontWeight.demibold}"
- },
- "subtitle": {
- "color": "{text.mutedColor}"
- }
- },
- "carousel": {
- "colorScheme": {
- "light": {
- "indicator": {
- "background": "{surface.300}",
- "hoverBackground": "{surface.400}",
- "activeBackground": "{surface.900}"
- }
- }
- },
- "root": {
- "transitionDuration": "{transitionDuration}"
- },
- "content": {
- "gap": "0.4375rem"
- },
- "indicatorList": {
- "padding": "0.875rem",
- "gap": "0.4375rem"
- },
- "indicator": {
- "width": "0.4375rem",
- "height": "0.4375rem",
- "borderRadius": "{borderRadius.xl}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{rating.focusRing.shadow}"
- }
- }
- },
- "checkbox": {
- "root": {
- "borderRadius": "{borderRadius.sm}",
- "extend": {
- "borderWidth": "0.0625rem"
- },
- "width": "1.3125rem",
- "height": "1.3125rem",
- "background": "{formField.background}",
- "checkedBackground": "{surface.900}",
- "checkedHoverBackground": "{surface.800}",
- "disabledBackground": "{formField.disabledBackground}",
- "filledBackground": "{formField.filledBackground}",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.hoverBorderPrimaryColor}",
- "focusBorderColor": "{formField.focusBorderPrimaryColor}",
- "checkedBorderColor": "{surface.900}",
- "checkedHoverBorderColor": "{surface.800}",
- "checkedFocusBorderColor": "{primary.color}",
- "checkedDisabledBorderColor": "{formField.borderColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "shadow": "{formField.shadow}",
- "focusRing": {
- "focusRing": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- },
- "sm": {
- "width": "0.875rem",
- "height": "0.875rem"
- },
- "lg": {
- "width": "1.09375rem",
- "height": "1.09375rem"
- },
- "transitionDuration": "{formField.transitionDuration}"
- },
- "icon": {
- "size": "0.875rem",
- "color": "{formField.color}",
- "checkedColor": "{primary.contrastColor}",
- "checkedHoverColor": "{primary.contrastColor}",
- "disabledColor": "{formField.disabledColor}",
- "sm": {
- "size": "0.65625rem"
- },
- "lg": {
- "size": "1.09375rem"
- }
- }
- },
- "chip": {
- "extend": {
- "borderColor": "{transparent}"
- },
- "root": {
- "borderRadius": "{borderRadius.sm}",
- "paddingX": "0.4375rem",
- "paddingY": "0.21875rem",
- "gap": "0.4375rem",
- "transitionDuration": "{formField.transitionDuration}"
- },
- "colorScheme": {
- "light": {
- "root": {
- "background": "{surface.200}",
- "color": "{text.color}"
- },
- "icon": {
- "color": "{text.color}"
- },
- "removeIcon": {
- "color": "{text.color}"
- }
- }
- },
- "image": {
- "width": "0",
- "height": "0"
- },
- "icon": {
- "size": "0.875rem"
- },
- "removeIcon": {
- "size": "0.875rem",
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{primary.200}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.focusRing.shadow}"
- }
- }
- },
- "confirmdialog": {
- "extend": {
- "extIcon": {
- "success": "{success.500}",
- "info": "{info.500}",
- "help": "{help.500}",
- "warn": "{warn.500}",
- "danger": "{error.500}"
- }
- },
- "icon": {
- "size": "1.3125rem",
- "color": "{overlay.modal.color}"
- },
- "content": {
- "gap": "0"
- }
- },
- "confirmpopup": {
- "root": {
- "background": "{overlay.popover.background}",
- "color": "{overlay.popover.color}",
- "shadow": "{overlay.popover.shadow}",
- "gutter": "10px",
- "arrowOffset": "1.25rem"
- },
- "content": {
- "padding": "{overlay.popover.padding}",
- "gap": "1rem"
- },
- "icon": {
- "size": "1.5rem",
- "color": "{overlay.popover.color}"
- },
- "footer": {
- "gap": "0.5rem",
- "padding": "0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}"
- }
- },
- "contextmenu": {
- "root": {
- "background": "{content.background}",
- "color": "{content.color}",
- "shadow": "{overlay.navigation.shadow}"
- },
- "list": {
- "padding": "{navigation.list.padding}",
- "gap": "{navigation.list.gap}"
- },
- "item": {
- "padding": "{navigation.item.padding}",
- "gap": "{navigation.item.gap}"
- },
- "submenu": {
- "mobileIndent": "1.25rem"
- }
- },
- "datatable": {
- "colorScheme": {
- "light": {
- "root": {
- "color": "{text.color}",
- "borderColor": "{content.borderColor}"
- },
- "header": {
- "background": "{surface.50}",
- "color": "{text.color}"
- },
- "headerCell": {
- "background": "{surface.50}",
- "hoverBackground": "{surface.100}",
- "color": "{text.color}"
- },
- "footer": {
- "background": "{surface.100}",
- "color": "{text.color}"
- },
- "footerCell": {
- "background": "{content.hoverBackground}",
- "color": "{text.color}"
- },
- "row": {
- "stripedBackground": "{content.hoverBackground}"
- },
- "bodyCell": {
- "selectedBorderColor": "{content.borderColor}"
- }
- }
- },
- "extended": {
- "extHeaderCell": {
- "selectedHoverBackground": "{surface.800}"
- },
- "extRow": {
- "selectedHoverBackground": "{surface.800}",
- "stripedHoverBackground": "{surface.100}"
- }
- },
- "root": {
- "transitionDuration": "{transitionDuration}"
- },
- "header": {
- "borderColor": "{content.borderColor}",
- "borderWidth": "1px 0 1px 0",
- "padding": "0.875rem",
- "sm": {
- "padding": "0.4375rem"
- },
- "lg": {
- "padding": "1.09375rem"
- }
- },
- "headerCell": {
- "selectedBackground": "{highlight.background}",
- "borderColor": "{content.borderColor}",
- "hoverColor": "{text.hoverColor}",
- "selectedColor": "{highlight.color}",
- "gap": "0.4375rem",
- "padding": "0.875rem",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "inset {focus.ring.shadow}"
- },
- "sm": {
- "padding": "0.4375rem"
- },
- "lg": {
- "padding": "1.09375rem"
- }
- },
- "columnTitle": {
- "fontWeight": "{fonts.fontWeight.bold}"
- },
- "row": {
- "background": "{content.background}",
- "hoverBackground": "{content.hoverBackground}",
- "selectedBackground": "{highlight.background}",
- "color": "{content.color}",
- "hoverColor": "{content.hoverColor}",
- "selectedColor": "{highlight.color}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "inset {focus.ring.shadow}"
- }
- },
- "bodyCell": {
- "borderColor": "{content.borderColor}",
- "padding": "0.875rem",
- "sm": {
- "padding": "0.4375rem"
- },
- "lg": {
- "padding": "1.09375rem"
- }
- },
- "footerCell": {
- "borderColor": "{content.borderColor}",
- "padding": "0.875rem",
- "sm": {
- "padding": "0.4375rem"
- },
- "lg": {
- "padding": "1.09375rem"
- }
- },
- "columnFooter": {
- "fontWeight": "{fonts.fontWeight.bold}"
- },
- "dropPoint": {
- "color": "{highlight.background}"
- },
- "footer": {
- "borderColor": "{content.borderColor}",
- "borderWidth": "0 0 1px 0",
- "padding": "1rem",
- "sm": {
- "padding": "0.5rem"
- },
- "lg": {
- "padding": "1.25rem"
- }
- },
- "columnResizer": {
- "width": "0.4375rem"
- },
- "resizeIndicator": {
- "width": "1px",
- "color": "{highlight.background}"
- },
- "sortIcon": {
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "size": "0.875rem"
- },
- "loadingIcon": {
- "size": "1.75rem"
- },
- "rowToggleButton": {
- "hoverBackground": "{content.hoverBackground}",
- "selectedHoverBackground": "{content.hoverBackground}",
- "color": "{text.color}",
- "hoverColor": "{text.color}",
- "selectedHoverColor": "{text.color}",
- "size": "1.75rem",
- "borderRadius": "{content.borderRadius}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "filter": {
- "inlineGap": "0.4375rem",
- "rule": {
- "borderColor": "{content.borderColor}"
- },
- "constraintList": {
- "padding": "{list.padding}",
- "gap": "{list.gap}"
- },
- "constraint": {
- "focusBackground": "{list.option.focusBackground}",
- "selectedBackground": "{list.option.selectedBackground}",
- "selectedFocusBackground": "{list.option.selectedFocusBackground}",
- "color": "{list.option.color}",
- "focusColor": "{list.option.focusColor}",
- "selectedColor": "{list.option.selectedColor}",
- "selectedFocusColor": "{list.option.selectedFocusColor}",
- "padding": "{list.option.padding}",
- "borderRadius": "{list.option.borderRadius}",
- "separator": {
- "borderColor": "{content.borderColor}"
- }
- },
- "overlaySelect": {
- "background": "{overlay.select.background}",
- "color": "{overlay.select.color}",
- "borderColor": "{overlay.select.borderColor}",
- "borderRadius": "{overlay.select.borderRadius}",
- "shadow": "{overlay.select.shadow}"
- },
- "overlayPopover": {
- "background": "{overlay.popover.background}",
- "color": "{overlay.popover.color}",
- "borderColor": "{overlay.select.borderColor}",
- "borderRadius": "{overlay.select.borderRadius}",
- "shadow": "{overlay.popover.shadow}",
- "padding": "{overlay.popover.padding}",
- "gap": "{list.gap}"
- }
- },
- "paginatorTop": {
- "borderColor": "{formField.borderColor}",
- "borderWidth": "0 0 1px 0"
- },
- "paginatorBottom": {
- "borderWidth": "0 0 1px 0",
- "borderColor": "{content.borderColor}"
- }
- },
- "dataview": {
- "root": {
- "borderWidth": "1px",
- "borderRadius": "4px",
- "padding": "0",
- "borderColor": "#ffffff"
- },
- "header": {
- "borderWidth": "0 0 1px 0",
- "padding": "0.875rem 1.125rem",
- "borderRadius": "5px 5px 0 0",
- "color": "{text.color}"
- },
- "content": {
- "background": "{content.background}",
- "color": "{content.color}",
- "borderColor": "#ffffff",
- "borderWidth": "0",
- "padding": "0",
- "borderRadius": "5px"
- },
- "footer": {
- "background": "{content.background}",
- "color": "{content.color}",
- "borderWidth": "1px 0 0 0",
- "padding": "0.875rem 1.125rem",
- "borderRadius": "0 0 5px 5px"
- },
- "paginatorTop": {
- "borderWidth": "0 0 1px 0"
- },
- "paginatorBottom": {
- "borderWidth": "1px 0 0 0"
- }
- },
- "datepicker": {
- "colorScheme": {
- "light": {
- "dropdown": {
- "background": "{content.background}",
- "hoverBackground": "{navigation.item.focusBackground}",
- "activeBackground": "{navigation.item.activeBackground}",
- "color": "{navigation.item.color}",
- "hoverColor": "{navigation.item.focusColor}",
- "activeColor": "{navigation.item.activeColor}"
- },
- "today": {
- "background": "{content.background}",
- "color": "{text.color}"
- }
- }
- },
- "extend": {
- "extDate": {
- "selectedHoverBackground": "{primary.600}"
- },
- "extToday": {
- "borderColor": "{content.borderColor}",
- "hoverBackground": "{content.hoverBackground}"
- },
- "extTimePicker": {
- "minWidth": "2.5rem",
- "color": "{content.color}"
- },
- "extTitle": {
- "width": "13.125rem"
- }
- },
- "panel": {
- "background": "{content.background}",
- "borderColor": "{content.borderColor}",
- "color": "{content.color}",
- "borderRadius": "{content.borderRadius}",
- "shadow": "{overlay.popover.shadow}",
- "padding": "{overlay.popover.padding}"
- },
- "header": {
- "background": "{content.background}",
- "borderColor": "{content.borderColor}",
- "color": "{content.color}",
- "padding": "0 0 0.5rem 0"
- },
- "title": {
- "gap": "0.4375rem",
- "fontWeight": "{fonts.fontWeight.bold}"
- },
- "selectMonth": {
- "hoverBackground": "{content.hoverBackground}",
- "color": "{content.color}",
- "hoverColor": "{content.hoverColor}",
- "borderRadius": "{content.borderRadius}",
- "padding": "0.375rem 0.625rem"
- },
- "dropdown": {
- "width": "2.5rem",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.borderColor}",
- "activeBorderColor": "{formField.borderColor}",
- "borderRadius": "{formField.borderRadius}",
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- },
- "sm": {
- "width": "0"
- },
- "lg": {
- "width": "0"
- }
- },
- "inputIcon": {
- "color": "{formField.iconColor}"
- },
- "group": {
- "borderColor": "{content.borderColor}",
- "gap": "{overlay.popover.padding}"
- },
- "selectYear": {
- "hoverBackground": "{content.hoverBackground}",
- "color": "{content.color}",
- "hoverColor": "{content.hoverColor}",
- "borderRadius": "{content.borderRadius}",
- "padding": "0.375rem 0.625rem"
- },
- "dayView": {
- "margin": "0 0 0 0"
- },
- "weekDay": {
- "padding": "0.21875rem",
- "fontWeight": "{fonts.fontWeight.bold}",
- "color": "{content.color}"
- },
- "date": {
- "hoverBackground": "{content.hoverBackground}",
- "selectedBackground": "{primary.500}",
- "rangeSelectedBackground": "{highlight.background}",
- "color": "{content.color}",
- "hoverColor": "{content.color}",
- "selectedColor": "{text.extend.colorPrimaryStatic}",
- "rangeSelectedColor": "{text.extend.colorSecondaryStatic}",
- "width": "1.75rem",
- "height": "1.75rem",
- "borderRadius": "0.328125rem",
- "padding": "0.21875rem",
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- }
- },
- "monthView": {
- "margin": "0 0 0 0"
- },
- "month": {
- "padding": "0",
- "borderRadius": "0"
- },
- "yearView": {
- "margin": "0 0 0 0"
- },
- "year": {
- "padding": "0",
- "borderRadius": "0"
- },
- "buttonbar": {
- "padding": "0 0 0 0",
- "borderColor": "{content.borderColor}"
- },
- "timePicker": {
- "padding": "1.5rem 0.75rem 0.75rem 0.75rem",
- "borderColor": "{content.borderColor}",
- "gap": "0.4375rem",
- "buttonGap": "0.21875rem"
- },
- "root": {
- "transitionDuration": "{transitionDuration}"
- }
- },
- "dialog": {
- "root": {
- "background": "{overlay.modal.background}",
- "borderColor": "{overlay.modal.borderColor}",
- "color": "{overlay.modal.color}",
- "borderRadius": "{overlay.modal.borderRadius}",
- "shadow": "{overlay.popover.shadow}"
- },
- "header": {
- "padding": "{overlay.modal.padding} {overlay.modal.padding} 1rem {overlay.modal.padding}",
- "gap": "0"
- },
- "title": {
- "fontSize": "{fonts.fontSize.xl}",
- "fontWeight": "{fonts.fontWeight.demibold}"
- },
- "content": {
- "padding": "1.3125rem"
- },
- "footer": {
- "padding": "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}",
- "gap": "0.4375rem"
- }
- },
- "divider": {
- "root": {
- "borderColor": "{content.borderColor}"
- },
- "content": {
- "background": "{content.background}",
- "color": "{text.mutedColor}"
- },
- "horizontal": {
- "margin": "1rem 0",
- "padding": "0 1rem",
- "content": {
- "padding": "0 0.5rem"
- }
- },
- "vertical": {
- "margin": "0 1rem",
- "padding": "1rem 0",
- "content": {
- "padding": "0.5rem 0"
- }
- }
- },
- "drawer": {
- "extend": {
- "borderRadius": "{overlay.popover.borderRadius}",
- "extHeader": {
- "gap": "0.4375rem",
- "borderColor": "{drawer.root.borderColor}"
- },
- "width": "{sizingDrawer.width}"
- },
- "root": {
- "background": "{overlay.modal.background}",
- "borderColor": "{overlay.modal.borderColor}",
- "color": "{overlay.modal.color}",
- "shadow": "{overlay.modal.shadow}"
- },
- "header": {
- "padding": "{overlay.modal.padding} {overlay.modal.padding} 14 {overlay.modal.padding} "
- },
- "title": {
- "fontSize": "{fonts.fontSize.xl}",
- "fontWeight": "{fonts.fontWeight.demibold}"
- },
- "content": {
- "padding": "{overlay.modal.padding}"
- },
- "footer": {
- "padding": "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding} "
- }
- },
- "fileupload": {
- "colorScheme": {
- "light": {
- "header": {
- "background": "{surface.0}",
- "color": "{text.color}"
- }
- }
- },
- "extend": {
- "extDragNdrop": {
- "background": "{surface.0}",
- "padding": "0.875rem",
- "borderRadius": "{formField.borderRadius}",
- "gap": "0.4375rem",
- "info": {
- "gap": "0.21875rem"
- }
- },
- "extContent": {
- "borderRadius": "{borderRadius.md}",
- "highlightBorderDefault": "{formField.borderColor}"
- }
- },
- "root": {
- "background": "{content.background}",
- "borderColor": "{content.borderColor}",
- "color": "{content.color}",
- "borderRadius": "{content.borderRadius}",
- "transitionDuration": "{transitionDuration}"
- },
- "header": {
- "borderColor": "{content.borderColor}",
- "borderWidth": "0",
- "padding": "0",
- "borderRadius": "0",
- "gap": "0.4375rem"
- },
- "content": {
- "highlightBorderColor": "{surface.900}",
- "padding": "0",
- "gap": "0.4375rem"
- },
- "file": {
- "padding": "0.4375rem",
- "gap": "0.4375rem",
- "borderColor": "{formField.borderColor}",
- "info": {
- "gap": "0.21875rem"
- }
- },
- "fileList": {
- "gap": "0.4375rem"
- },
- "progressbar": {
- "height": "0.4375rem"
- },
- "basic": {
- "gap": "0.5rem"
- }
- },
- "floatlabel": {
- "extend": {
- "height": "3.5rem",
- "iconSize": "{iconSizeLarge}"
- },
- "root": {
- "color": "{formField.floatLabelColor}",
- "focusColor": "{formField.floatLabelFocusColor}",
- "activeColor": "{formField.floatLabelActiveColor}",
- "invalidColor": "{formField.floatLabelInvalidColor}",
- "transitionDuration": "{formField.transitionDuration}",
- "positionX": "{formField.paddingX}",
- "positionY": "{formField.paddingY}",
- "fontWeight": "{fonts.fontWeight.regular}",
- "active": {
- "fontSize": "{fonts.fontSize.sm}",
- "fontWeight": "{fonts.fontWeight.regular}"
- }
- },
- "over": {
- "active": {
- "top": "0.5rem"
- }
- },
- "inside": {
- "input": {
- "paddingTop": "1.640625rem",
- "paddingBottom": "{formField.paddingY}"
- },
- "active": {
- "top": "{formField.paddingY}"
- }
- },
- "on": {
- "borderRadius": "0",
- "active": {
- "padding": "0 0.125rem",
- "background": "#ffffff"
- }
- }
- },
- "galleria": {
- "colorScheme": {
- "light": {
- "thumbnailContent": {
- "background": "{surface.100}"
- },
- "thumbnailNavButton": {
- "hoverBackground": "{colors.alpha.white.20}",
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}"
- },
- "indicatorButton": {
- "background": "{surface.300}",
- "hoverBackground": "{surface.400}"
- }
- }
- },
- "root": {
- "borderWidth": "1px",
- "borderColor": "{content.borderColor}",
- "borderRadius": "{content.borderRadius}",
- "transitionDuration": "{transitionDuration}"
- },
- "navButton": {
- "background": "{transparent}",
- "hoverBackground": "{colors.alpha.white.20}",
- "color": "{text.extend.colorInverted}",
- "hoverColor": "{text.extend.colorInverted}",
- "size": "3.5rem",
- "gutter": "0.4375rem",
- "prev": {
- "borderRadius": "{navigation.item.borderRadius}"
- },
- "next": {
- "borderRadius": "{navigation.item.borderRadius}"
- },
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "navIcon": {
- "size": "1.75rem"
- },
- "thumbnailsContent": {
- "padding": "0.21875rem"
- },
- "thumbnailNavButton": {
- "size": "1.75rem",
- "borderRadius": "{content.borderRadius}",
- "gutter": "0.4375rem",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "thumbnailNavButtonIcon": {
- "size": "0.875rem"
- },
- "caption": {
- "background": "{colors.alpha.white.50}",
- "color": "{text.color}",
- "padding": "0.4375rem"
- },
- "indicatorList": {
- "gap": "0.4375rem",
- "padding": "0.875rem"
- },
- "indicatorButton": {
- "width": "0.4375rem",
- "height": "0.4375rem",
- "activeBackground": "{surface.900}",
- "borderRadius": "{content.borderRadius}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "insetIndicatorList": {
- "background": "{colors.alpha.black.50}"
- },
- "insetIndicatorButton": {
- "background": "{colors.alpha.white.10}",
- "hoverBackground": "{colors.alpha.white.20}",
- "activeBackground": "{colors.alpha.white.50}"
- },
- "closeButton": {
- "size": "3.5rem",
- "gutter": "0.4375rem",
- "background": "{colors.alpha.white.10}",
- "hoverBackground": "{colors.alpha.white.20}",
- "color": "{text.extend.colorInverted}",
- "hoverColor": "{text.extend.colorInverted}",
- "borderRadius": "{borderRadius.lg}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "closeButtonIcon": {
- "size": "1.75rem"
- }
- },
- "message": {
- "colorScheme": {
- "light": {
- "success": {
- "background": "{success.50}",
- "borderColor": "{success.500}",
- "color": "{text.color}",
- "shadow": "none",
- "outlined": {
- "color": "{text.color}",
- "borderColor": "{success.500}"
- },
- "closeButton": {
- "hoverBackground": "{success.200}",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- },
- "simple": {
- "color": "{text.color}"
- }
- },
- "outlined": {
- "root": {
- "borderWidth": "0"
- },
- "closeButton": {
- "hoverBackground": "#ffffff",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- },
- "outlined": {
- "color": "#ffffff",
- "borderColor": "#ffffff"
- },
- "simple": {
- "color": "#ffffff"
- }
- },
- "simple": {
- "content": {
- "padding": "0"
- }
- },
- "warn": {
- "background": "{warn.50}",
- "borderColor": "{warn.500}",
- "color": "{text.color}",
- "shadow": "none",
- "outlined": {
- "color": "{text.color}",
- "borderColor": "{warn.500}"
- },
- "closeButton": {
- "hoverBackground": "{warn.200}",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- },
- "simple": {
- "color": "{text.color}"
- }
- },
- "error": {
- "background": "{error.50}",
- "borderColor": "{error.500}",
- "color": "{text.color}",
- "shadow": "none",
- "outlined": {
- "color": "{text.color}",
- "borderColor": "{error.500}"
- },
- "closeButton": {
- "hoverBackground": "{error.200}",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- },
- "simple": {
- "color": "{text.color}"
- }
- },
- "secondary": {
- "borderColor": "#ffffff",
- "shadow": "none",
- "closeButton": {
- "hoverBackground": "#ffffff",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- },
- "simple": {
- "color": "#ffffff"
- },
- "outlined": {
- "color": "#ffffff",
- "borderColor": "#ffffff"
- }
- },
- "contrast": {
- "borderColor": "#ffffff",
- "shadow": "none",
- "closeButton": {
- "hoverBackground": "#ffffff",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- },
- "simple": {
- "color": "#ffffff"
- },
- "outlined": {
- "color": "#ffffff",
- "borderColor": "#ffffff"
- }
- },
- "info": {
- "background": "{info.50}",
- "borderColor": "{info.500}",
- "color": "{text.color}",
- "shadow": "none",
- "outlined": {
- "color": "{text.color}",
- "borderColor": "{info.500}"
- },
- "closeButton": {
- "hoverBackground": "{info.200}",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- },
- "simple": {
- "color": "{text.color}"
- }
- }
- }
- },
- "extend": {
- "width": "{sizingMessage.width}",
- "extText": {
- "gap": "0.21875rem"
- },
- "extInfo": {
- "color": "{info.500}",
- "closeButton": {
- "color": "{info.500}",
- "borderColor": "{info.500}"
- },
- "caption": {
- "color": "{text.color}"
- }
- },
- "extAccentLine": {
- "width": "0.21875rem"
- },
- "extCloseButton": {
- "width": "0.0625rem"
- },
- "extSuccess": {
- "color": "{success.500}",
- "closeButton": {
- "color": "{success.500}",
- "borderColor": "{success.500}"
- },
- "caption": {
- "color": "{text.color}"
- }
- },
- "extWarn": {
- "color": "{warn.500}",
- "closeButton": {
- "color": "{warn.500}",
- "borderColor": "{warn.500}"
- },
- "caption": {
- "color": "{text.color}"
- }
- },
- "extError": {
- "color": "{error.500}",
- "closeButton": {
- "color": "{error.500}",
- "borderColor": "{error.500}"
- },
- "caption": {
- "color": "{text.color}"
- }
- }
- },
- "root": {
- "borderRadius": "{content.borderRadius}",
- "borderWidth": "0.0625rem",
- "transitionDuration": "{transitionDuration}"
- },
- "content": {
- "padding": "0.875rem",
- "gap": "0.875rem",
- "sm": {
- "padding": "0.875rem"
- },
- "lg": {
- "padding": "0.875rem"
- }
- },
- "text": {
- "fontSize": "{fonts.fontSize.base}",
- "fontWeight": "{fonts.fontWeight.bold}",
- "sm": {
- "fontSize": "{fonts.fontSize.base}"
- },
- "lg": {
- "fontSize": "{fonts.fontSize.base}"
- }
- },
- "icon": {
- "size": "1.96875rem",
- "sm": {
- "size": "1.96875rem"
- },
- "lg": {
- "size": "1.96875rem"
- }
- },
- "closeButton": {
- "width": "1.75rem",
- "height": "1.75rem",
- "borderRadius": "0.65625rem",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "offset": "{focusRing.offset}"
- }
- },
- "closeIcon": {
- "size": "0.875rem",
- "sm": {
- "size": "0.875rem"
- },
- "lg": {
- "size": "0.875rem"
- }
- }
- },
- "inputgroup": {
- "colorScheme": {
- "light": {
- "addon": {
- "background": "{transparent}",
- "borderColor": "{formField.borderColor}",
- "color": "{text.mutedColor}"
- }
- }
- },
- "addon": {
- "borderRadius": "{formField.borderRadius}",
- "padding": "0.65625rem",
- "minWidth": "2.1875rem"
- }
- },
- "inputnumber": {
- "colorScheme": {
- "light": {
- "button": {
- "background": "{transparent}",
- "hoverBackground": "{content.hoverBackground}",
- "activeBackground": "{transparent}",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.borderColor}",
- "activeBorderColor": "{formField.borderColor}",
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "activeColor": "{text.color}"
- }
- }
- },
- "extend": {
- "extButton": {
- "height": "2.1875rem"
- }
- },
- "transitionDuration": {
- "transitionDuration": "{formField.transitionDuration}"
- },
- "button": {
- "width": "2.1875rem",
- "borderRadius": "{formField.borderRadius}",
- "verticalPadding": "{formField.paddingY}"
- }
- },
- "inputotp": {
- "extend": {
- "height": "2.1875rem"
- },
- "root": {
- "gap": "0.4375rem"
- },
- "input": {
- "width": "2.1875rem"
- },
- "sm": {
- "width": "0"
- },
- "lg": {
- "width": "0"
- }
- },
- "inputtext": {
- "extend": {
- "readonlyBackground": "{formField.readonlyBackground}",
- "iconSize": "{iconSizeMedium}",
- "extXlg": {
- "fontSize": "{sizingInputtext.root.fontSize}",
- "paddingX": "{sizingInputtext.root.paddingX}",
- "paddingY": "{sizingInputtext.root.paddingY}"
- }
- },
- "root": {
- "background": "{formField.background}",
- "disabledBackground": "{formField.disabledBackground}",
- "filledBackground": "{formField.filledBackground}",
- "filledHoverBackground": "{formField.filledHoverBackground}",
- "filledFocusBackground": "{formField.filledFocusBackground}",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.hoverBorderSecondaryColor}",
- "focusBorderColor": "{formField.focusBorderSecondaryColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "color": "{text.color}",
- "disabledColor": "{formField.disabledColor}",
- "placeholderColor": "{formField.placeholderColor}",
- "invalidPlaceholderColor": "{formField.invalidPlaceholderColor}",
- "shadow": "{formField.shadow}",
- "paddingX": "{sizingInputtext.root.paddingX}",
- "paddingY": "{sizingInputtext.root.paddingY}",
- "borderRadius": "{formField.borderRadius}",
- "transitionDuration": "{formField.transitionDuration}",
- "sm": {
- "fontSize": "{sizingInputtext.root.fontSize}",
- "paddingX": "{sizingInputtext.root.paddingX}",
- "paddingY": "{sizingInputtext.root.paddingY}"
- },
- "lg": {
- "fontSize": "{sizingInputtext.root.fontSize}",
- "paddingX": "{sizingInputtext.root.paddingX}",
- "paddingY": "{sizingInputtext.root.paddingY}"
- },
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- }
- }
- },
- "listbox": {
- "colorScheme": {
- "light": {
- "option": {
- "stripedBackground": "{surface.50}"
- }
- }
- },
- "extend": {
- "extOption": {
- "label": {
- "gap": "0.21875rem"
- },
- "caption": {
- "color": "{text.mutedColor}",
- "stripedColor": "{text.mutedColor}"
- }
- }
- },
- "root": {
- "background": "{formField.background}",
- "disabledBackground": "{formField.disabledBackground}",
- "borderColor": "{formField.borderColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "color": "{formField.color}",
- "disabledColor": "{formField.disabledColor}",
- "shadow": "{formField.shadow}",
- "borderRadius": "{formField.borderRadius}",
- "transitionDuration": "{formField.transitionDuration}"
- },
- "list": {
- "padding": "{list.padding}",
- "gap": "{list.gap}",
- "header": {
- "padding": "{list.header.padding}"
- }
- },
- "option": {
- "focusBackground": "{list.option.focusBackground}",
- "selectedBackground": "{list.option.selectedBackground}",
- "selectedFocusBackground": "{list.option.selectedFocusBackground}",
- "color": "{list.option.color}",
- "focusColor": "{list.option.focusColor}",
- "selectedColor": "{list.option.selectedColor}",
- "selectedFocusColor": "{list.option.selectedFocusColor}",
- "padding": "{list.option.padding}",
- "borderRadius": "{list.option.borderRadius}"
- },
- "optionGroup": {
- "background": "{list.optionGroup.background}",
- "color": "{list.optionGroup.color}",
- "fontWeight": "{fonts.fontWeight.demibold}",
- "padding": "{list.option.padding}"
- },
- "checkmark": {
- "color": "{list.option.color}",
- "gutterStart": "-0.5rem",
- "gutterEnd": "0.5rem"
- },
- "emptyMessage": {
- "padding": "{list.option.padding}"
- }
- },
- "megamenu": {
- "colorScheme": {
- "light": {
- "root": {
- "background": "{transparent}"
- }
- }
- },
- "extend": {
- "extItem": {
- "caption": {
- "color": "{text.mutedColor}",
- "gap": "0.21875rem"
- }
- }
- },
- "root": {
- "borderColor": "{transparent}",
- "borderRadius": "{content.borderRadius}",
- "color": "{content.color}",
- "gap": "0.21875rem",
- "transitionDuration": "{transitionDuration}",
- "verticalOrientation": {
- "padding": "{navigation.list.padding}",
- "gap": "{navigation.list.gap}"
- },
- "horizontalOrientation": {
- "padding": "{navigation.list.padding}",
- "gap": "{navigation.list.gap}"
- }
- },
- "baseItem": {
- "borderRadius": "{content.borderRadius}",
- "padding": "{navigation.item.padding}"
- },
- "item": {
- "focusBackground": "{navigation.item.focusBackground}",
- "activeBackground": "{navigation.item.activeBackground}",
- "color": "{navigation.item.color}",
- "focusColor": "{navigation.item.focusColor}",
- "activeColor": "{navigation.item.activeColor}",
- "padding": "{navigation.item.padding}",
- "borderRadius": "{navigation.item.borderRadius}",
- "gap": "{navigation.item.gap}",
- "icon": {
- "color": "{navigation.item.icon.color}",
- "focusColor": "{navigation.item.icon.focusColor}",
- "activeColor": "{navigation.item.icon.activeColor}"
- }
- },
- "overlay": {
- "padding": "0.21875rem",
- "background": "{content.background}",
- "borderColor": "{content.borderColor}",
- "borderRadius": "{content.borderRadius}",
- "color": "{content.color}",
- "shadow": "{overlay.navigation.shadow}",
- "gap": "0"
- },
- "submenu": {
- "padding": "{navigation.list.padding}",
- "gap": "{navigation.list.gap}"
- },
- "submenuLabel": {
- "padding": "{navigation.submenuLabel.padding}",
- "background": "{navigation.submenuLabel.background}",
- "color": "{navigation.submenuLabel.color}",
- "Number": "{fonts.fontWeight.demibold}"
- },
- "submenuIcon": {
- "size": "{navigation.submenuIcon.size}",
- "color": "{navigation.submenuIcon.color}",
- "focusColor": "{navigation.submenuIcon.focusColor}",
- "activeColor": "{navigation.submenuIcon.activeColor}"
- },
- "separator": {
- "borderColor": "{content.borderColor}"
- },
- "mobileButton": {
- "borderRadius": "{navigation.item.borderRadius}",
- "size": "1.75rem",
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "hoverBackground": "{content.hoverBackground}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- }
- },
- "menu": {
- "extend": {
- "paddingX": "0.21875rem",
- "paddingY": "0.21875rem",
- "extItem": {
- "caption": {
- "color": "{text.mutedColor}",
- "gap": "0.21875rem"
- }
- }
- },
- "root": {
- "background": "{content.background}",
- "borderColor": "{content.borderColor}",
- "color": "{content.color}",
- "borderRadius": "{content.borderRadius}",
- "shadow": "{overlay.navigation.shadow}",
- "transitionDuration": "{transitionDuration}"
- },
- "list": {
- "padding": "{navigation.list.padding}",
- "gap": "{navigation.list.gap}"
- },
- "item": {
- "focusBackground": "{navigation.item.focusBackground}",
- "color": "{navigation.item.color}",
- "focusColor": "{navigation.item.focusColor}",
- "padding": "{navigation.item.padding}",
- "borderRadius": "{navigation.item.borderRadius}",
- "gap": "{navigation.item.gap}",
- "icon": {
- "color": "{navigation.item.icon.color}",
- "focusColor": "{navigation.item.icon.focusColor}"
- }
- },
- "submenuLabel": {
- "padding": "{navigation.submenuLabel.padding}",
- "fontWeight": "{fonts.fontWeight.demibold}",
- "background": "{navigation.submenuLabel.background}",
- "color": "{navigation.submenuLabel.color}"
- },
- "separator": {
- "borderColor": "{content.borderColor}"
- }
- },
- "menubar": {
- "extend": {
- "extItem": {
- "caption": {
- "color": "{text.mutedColor}",
- "gap": "0.21875rem"
- }
- },
- "extSubmenuLabel": {
- "padding": "{navigation.submenuLabel.padding}",
- "fontWeight": "{fonts.fontWeight.demibold}",
- "background": "{navigation.submenuLabel.background}",
- "color": "{navigation.submenuLabel.color}"
- }
- },
- "colorScheme": {
- "light": {
- "root": {
- "background": "{transparent}"
- }
- }
- },
- "root": {
- "borderColor": "{transparent}",
- "borderRadius": "{navigation.item.borderRadius}",
- "color": "{content.color}",
- "gap": "0.21875rem",
- "padding": "{navigation.list.padding}",
- "transitionDuration": "{transitionDuration}"
- },
- "baseItem": {
- "borderRadius": "{navigation.item.borderRadius}",
- "padding": "0.5rem 0.75rem"
- },
- "item": {
- "focusBackground": "{navigation.item.focusBackground}",
- "activeBackground": "{navigation.item.activeBackground}",
- "color": "{navigation.item.color}",
- "focusColor": "{navigation.item.focusColor}",
- "activeColor": "{navigation.item.activeColor}",
- "padding": "{navigation.item.padding}",
- "borderRadius": "{navigation.item.borderRadius}",
- "gap": "{navigation.item.gap}",
- "icon": {
- "color": "{navigation.item.icon.color}",
- "focusColor": "{navigation.item.icon.focusColor}",
- "activeColor": "{navigation.item.icon.activeColor}"
- }
- },
- "submenu": {
- "padding": "{navigation.list.padding}",
- "gap": "{navigation.list.gap}",
- "background": "{content.background}",
- "borderColor": "{content.borderColor}",
- "borderRadius": "{content.borderRadius}",
- "shadow": "{overlay.navigation.shadow}",
- "mobileIndent": "0.65625rem",
- "icon": {
- "size": "{navigation.submenuIcon.size}",
- "color": "{navigation.submenuIcon.color}",
- "focusColor": "{navigation.submenuIcon.focusColor}",
- "activeColor": "{navigation.submenuIcon.activeColor}"
- }
- },
- "separator": {
- "borderColor": "{content.borderColor}"
- },
- "mobileButton": {
- "borderRadius": "{navigation.item.borderRadius}",
- "size": "1.75rem",
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "hoverBackground": "{content.hoverBackground}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- }
- },
- "metergroup": {
- "extend": {
- "extLabel": {
- "color": "{text.mutedColor}"
- }
- },
- "root": {
- "borderRadius": "{content.borderRadius}",
- "gap": "0.65625rem"
- },
- "meters": {
- "size": "0.4375rem",
- "background": "{content.borderColor}"
- },
- "label": {
- "gap": "0.4375rem"
- },
- "labelMarker": {
- "size": "0.4375rem"
- },
- "labelIcon": {
- "size": "0.875rem"
- },
- "labelList": {
- "verticalGap": "0.4375rem",
- "horizontalGap": "0.65625rem"
- }
- },
- "multiselect": {
- "extend": {
- "paddingX": "0.3125rem",
- "paddingY": "0.3125rem"
- },
- "root": {
- "background": "{formField.background}",
- "disabledBackground": "{formField.disabledBackground}",
- "filledBackground": "{formField.filledBackground}",
- "filledHoverBackground": "{formField.filledHoverBackground}",
- "filledFocusBackground": "{formField.filledFocusBackground}",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.hoverBorderSecondaryColor}",
- "focusBorderColor": "{formField.focusBorderSecondaryColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "color": "{formField.color}",
- "disabledColor": "{formField.disabledColor}",
- "placeholderColor": "{formField.placeholderColor}",
- "invalidPlaceholderColor": "{formField.invalidPlaceholderColor}",
- "shadow": "{formField.shadow}",
- "paddingX": "{formField.paddingX}",
- "paddingY": "{formField.paddingY}",
- "borderRadius": "{formField.borderRadius}",
- "transitionDuration": "{formField.transitionDuration}",
- "sm": {
- "fontSize": "{formField.sm.fontSize}",
- "paddingX": "{formField.sm.paddingY}",
- "paddingY": "{formField.sm.paddingY}"
- },
- "lg": {
- "fontSize": "{formField.lg.fontSize}",
- "paddingX": "{formField.lg.paddingX}",
- "paddingY": "{formField.lg.paddingY}"
- },
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- }
- },
- "dropdown": {
- "width": "0.75rem",
- "color": "{formField.iconColor}"
- },
- "overlay": {
- "background": "{datatable.filter.overlaySelect.background}",
- "borderColor": "{overlay.select.borderColor}",
- "borderRadius": "{datatable.filter.overlaySelect.borderRadius}",
- "color": "{datatable.filter.overlaySelect.color}",
- "shadow": "{overlay.select.shadow}"
- },
- "readonlyBackground": "{formField.readonlyBackground}",
- "list": {
- "padding": "{list.padding}",
- "header": {
- "padding": "{list.header.padding}"
- },
- "gap": "{list.gap}"
- },
- "option": {
- "focusBackground": "{list.option.focusBackground}",
- "selectedBackground": "{list.option.selectedBackground}",
- "selectedFocusBackground": "{list.option.selectedFocusBackground}",
- "color": "{list.option.color}",
- "focusColor": "{list.option.focusColor}",
- "selectedColor": "{list.option.selectedColor}",
- "selectedFocusColor": "{list.option.selectedFocusColor}",
- "padding": "{list.option.padding}",
- "borderRadius": "{list.option.borderRadius}",
- "gap": "0.4375rem"
- },
- "optionGroup": {
- "background": "{list.optionGroup.background}",
- "color": "{list.optionGroup.color}",
- "fontWeight": "{fonts.fontWeight.demibold}",
- "padding": "{list.optionGroup.padding}"
- },
- "clearIcon": {
- "color": "{formField.iconColor}"
- },
- "chip": {
- "borderRadius": "{borderRadius.sm}"
- },
- "emptyMessage": {
- "padding": "{list.option.padding}"
- }
- },
- "paginator": {
- "root": {
- "padding": "0 0.5rem",
- "gap": "0.4375rem",
- "borderRadius": "{content.borderRadius}",
- "background": "{transparent}",
- "color": "{content.color}",
- "transitionDuration": "{transitionDuration}"
- },
- "currentPageReport": {
- "color": "{text.mutedColor}"
- },
- "navButton": {
- "background": "{transparent}",
- "hoverBackground": "{content.hoverBackground}",
- "selectedBackground": "{highlight.background}",
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}",
- "selectedColor": "{text.extend.colorInverted}",
- "width": "2.1875rem",
- "height": "2.1875rem",
- "borderRadius": "{content.borderRadius}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "focus": "{focusRing.shadow}"
- }
- },
- "jumpToPageInput": {
- "maxWidth": "4.375rem"
- }
- },
- "panelmenu": {
- "extend": {
- "extPanel": {
- "gap": "0.21875rem"
- },
- "extItem": {
- "activeBackground": "{navigation.item.activeBackground}",
- "activeColor": "{navigation.item.activeColor}",
- "caption": {
- "color": "{text.mutedColor}",
- "gap": "0.21875rem"
- }
- }
- },
- "root": {
- "gap": "0.21875rem",
- "transitionDuration": "{transitionDuration}"
- },
- "panel": {
- "background": "{transparent}",
- "borderColor": "{transparent}",
- "borderWidth": "0.0625rem",
- "color": "{content.color}",
- "padding": "0.21875rem",
- "borderRadius": "{content.borderRadius}",
- "first": {
- "borderWidth": "1px 1px 0 1px",
- "topBorderRadius": "{content.borderRadius}"
- },
- "last": {
- "borderWidth": "0 1px 1px 1px",
- "topBorderRadius": "{content.borderRadius}"
- }
- },
- "item": {
- "focusBackground": "{navigation.item.focusBackground}",
- "color": "{navigation.item.color}",
- "focusColor": "{navigation.item.focusColor}",
- "gap": "0.4375rem",
- "padding": "{navigation.item.padding}",
- "borderRadius": "{navigation.item.borderRadius}",
- "icon": {
- "color": "{navigation.item.icon.color}",
- "focusColor": "{navigation.item.icon.focusColor}"
- }
- },
- "submenu": {
- "indent": "0.65625rem"
- },
- "separator": {
- "borderColor": "{content.borderColor}"
- },
- "submenuIcon": {
- "color": "{navigation.submenuIcon.color}",
- "focusColor": "{navigation.submenuIcon.focusColor}"
- }
- },
- "password": {
- "colorScheme": {
- "light": {
- "strength": {
- "weakBackground": "{error.500}",
- "mediumBackground": "{warn.500}",
- "strongBackground": "{success.600}"
- }
- }
- },
- "meter": {
- "background": "{content.borderColor}",
- "borderRadius": "{content.borderRadius}",
- "height": "0.4375rem"
- },
- "icon": {
- "color": "{text.color}"
- },
- "overlay": {
- "background": "{overlay.popover.background}",
- "borderColor": "{overlay.popover.borderColor}",
- "borderRadius": "{overlay.popover.borderRadius}",
- "color": "{overlay.popover.color}",
- "padding": "{overlay.popover.padding}",
- "shadow": "{overlay.popover.shadow}"
- },
- "content": {
- "gap": "0.4375rem"
- }
- },
- "popover": {
- "root": {
- "background": "{overlay.popover.background}",
- "borderColor": "{datatable.filter.overlayPopover.borderColor}",
- "color": "{overlay.popover.color}",
- "borderRadius": "{overlay.popover.borderRadius}",
- "shadow": "{overlay.popover.shadow}",
- "gutter": "0.21875rem",
- "arrowOffset": "1.25rem"
- },
- "content": {
- "padding": "{overlay.popover.padding}"
- }
- },
- "progressbar": {
- "label": {
- "color": "{text.extend.colorPrimaryStatic}",
- "fontSize": "{fonts.fontSize.xs}",
- "fontWeight": "{fonts.fontWeight.regular}"
- },
- "root": {
- "background": "{content.borderColor}",
- "borderRadius": "{content.borderRadius}",
- "height": "0.875rem"
- },
- "value": {
- "background": "{primary.color}"
- }
- },
- "progressspinner": {
- "colorScheme": {
- "light": {
- "root": {
- "colorOne": "{success.500}",
- "colorTwo": "{info.500}",
- "colorThree": "{error.500}",
- "colorFour": "{warn.500}"
- }
- }
- }
- },
- "radiobutton": {
- "root": {
- "width": "1.3125rem",
- "height": "1.3125rem",
- "background": "{formField.background}",
- "checkedBackground": "{surface.900}",
- "checkedHoverBackground": "{surface.800}",
- "disabledBackground": "{formField.disabledBackground}",
- "filledBackground": "{formField.filledBackground}",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.hoverBorderPrimaryColor}",
- "focusBorderColor": "{formField.borderColor}",
- "checkedBorderColor": "{surface.900}",
- "checkedHoverBorderColor": "{formField.hoverBorderPrimaryColor}",
- "checkedFocusBorderColor": "{formField.focusBorderPrimaryColor}",
- "checkedDisabledBorderColor": "{formField.borderColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "shadow": "{formField.shadow}",
- "transitionDuration": "{formField.transitionDuration}"
- },
- "focusRing": {
- "width": "0.21875rem",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{formField.focusRing.shadow}"
- },
- "sm": {
- "width": "0.875rem",
- "height": "0.875rem"
- },
- "lg": {
- "width": "1.09375rem",
- "height": "1.09375rem"
- },
- "icon": {
- "size": "0.75rem",
- "checkedColor": "{text.extend.colorInverted}",
- "checkedHoverColor": "{text.extend.colorInverted}",
- "disabledColor": "{text.mutedColor}",
- "sm": {
- "size": "0"
- },
- "lg": {
- "size": "0"
- }
- }
- },
- "rating": {
- "root": {
- "gap": "0.4375rem",
- "transitionDuration": "{formField.transitionDuration}"
- },
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- },
- "icon": {
- "size": "1.3125rem",
- "color": "{surface.500}",
- "hoverColor": "{warn.500}",
- "activeColor": "{warn.500}"
- }
- },
- "ripple": {
- "colorScheme": {
- "light": {
- "root": {
- "background": "rgba(255, 255, 255, 0.0100)"
- }
- }
- }
- },
- "scrollpanel": {
- "colorScheme": {
- "light": {
- "bar": {
- "background": "{surface.300}"
- }
- }
- },
- "root": {
- "transitionDuration": "{transitionDuration}"
- },
- "bar": {
- "size": "0.4375rem",
- "borderRadius": "{borderRadius.sm}",
- "focusRing": {
- "width": "0",
- "style": "{focusRing.style}",
- "color": "#ffffff",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- }
- },
- "select": {
- "extend": {
- "extOption": {
- "background": "{list.option.background}",
- "gap": "0.4375rem"
- },
- "extOptionGroup": {
- "gap": "0.4375rem"
- },
- "readonlyBackground": "{formField.readonlyBackground}"
- },
- "root": {
- "background": "{formField.background}",
- "disabledBackground": "{formField.disabledBackground}",
- "filledBackground": "{formField.filledBackground}",
- "filledHoverBackground": "{formField.filledHoverBackground}",
- "filledFocusBackground": "{formField.filledFocusBackground}",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.hoverBorderSecondaryColor}",
- "focusBorderColor": "{formField.focusBorderSecondaryColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "color": "{text.color}",
- "disabledColor": "{formField.disabledColor}",
- "placeholderColor": "{formField.placeholderColor}",
- "invalidPlaceholderColor": "{formField.invalidPlaceholderColor}",
- "shadow": "{formField.shadow}",
- "paddingX": "{sizingSelect.root.paddingX}",
- "paddingY": "{sizingSelect.root.paddingY}",
- "borderRadius": "{formField.borderRadius}",
- "transitionDuration": "{formField.transitionDuration}",
- "sm": {
- "fontSize": "{sizingSelect.root.fontSize}",
- "paddingX": "{sizingSelect.root.paddingX}",
- "paddingY": "{sizingSelect.root.paddingY}"
- },
- "lg": {
- "fontSize": "{sizingSelect.root.fontSize}",
- "paddingX": "{sizingSelect.root.paddingX}",
- "paddingY": "{sizingSelect.root.paddingY}"
- },
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- }
- },
- "dropdown": {
- "width": "2.5rem",
- "color": "{formField.iconColor}"
- },
- "overlay": {
- "background": "{overlay.select.background}",
- "borderColor": "{overlay.select.borderColor}",
- "borderRadius": "{overlay.select.borderRadius}",
- "color": "{overlay.select.color}",
- "shadow": "{overlay.select.shadow}"
- },
- "list": {
- "padding": "{list.padding}",
- "gap": "{list.gap}",
- "header": {
- "padding": "{list.header.padding}"
- }
- },
- "option": {
- "focusBackground": "{list.option.focusBackground}",
- "selectedBackground": "{list.option.selectedBackground}",
- "selectedFocusBackground": "{list.option.selectedFocusBackground}",
- "color": "{list.option.color}",
- "focusColor": "{list.option.focusColor}",
- "selectedColor": "{list.option.selectedColor}",
- "selectedFocusColor": "{list.option.selectedFocusColor}",
- "padding": "{list.option.padding}",
- "borderRadius": "{list.option.borderRadius}"
- },
- "optionGroup": {
- "background": "{list.optionGroup.background}",
- "color": "{list.optionGroup.color}",
- "fontWeight": "{fonts.fontWeight.demibold}",
- "padding": "{list.option.padding}"
- },
- "clearIcon": {
- "color": "{formField.iconColor}"
- },
- "checkmark": {
- "color": "{list.option.color}",
- "gutterStart": "-0.5rem",
- "gutterEnd": "0.5rem"
- },
- "emptyMessage": {
- "padding": "{list.option.padding}"
- }
- },
- "selectbutton": {
- "colorScheme": {
- "light": {
- "root": {
- "invalidBorderColor": "{formField.invalidBorderColor}"
- }
- }
- },
- "extend": {
- "background": "{surface.200}"
- },
- "root": {
- "borderRadius": "{borderRadius.rounded}"
- }
- },
- "skeleton": {
- "colorScheme": {
- "light": {
- "root": {
- "background": "{surface.200}",
- "animationBackground": "{surface.100}"
- }
- }
- },
- "root": {
- "borderRadius": "{content.borderRadius}"
- }
- },
- "slider": {
- "colorScheme": {
- "light": {
- "handle": {
- "content": {
- "background": "{surface.0}"
- }
- }
- }
- },
- "root": {
- "transitionDuration": "{formField.transitionDuration}"
- },
- "track": {
- "background": "{content.borderColor}",
- "borderRadius": "{content.borderRadius}",
- "size": "0.21875rem"
- },
- "range": {
- "background": "{surface.900}"
- },
- "handle": {
- "width": "1.09375rem",
- "height": "1.09375rem",
- "borderRadius": "{borderRadius.xl}",
- "background": "{surface.900}",
- "hoverBackground": "{surface.900}",
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- },
- "content": {
- "borderRadius": "{borderRadius.xl}",
- "hoverBackground": "{surface.900}",
- "width": "0.65625rem",
- "height": "0.65625rem",
- "shadow": "none"
- }
- }
- },
- "splitter": {
- "colorScheme": {
- "light": {
- "handle": {
- "background": "{surface.900}"
- }
- }
- },
- "gutter": {
- "background": "{surface.100}"
- },
- "root": {
- "background": "{content.background}",
- "borderColor": "{content.borderColor}",
- "color": "{content.color}",
- "transitionDuration": "{transitionDuration}"
- },
- "handle": {
- "size": "0.21875rem",
- "borderRadius": "{content.borderRadius}",
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- }
- }
- },
- "stepper": {
- "extend": {
- "extCaption": {
- "gap": "0.21875rem"
- },
- "extStepNumber": {
- "invalidBackground": "{error.400}",
- "invalidColor": "{error.900}",
- "invalidBorderColor": "{error.400}"
- }
- },
- "root": {
- "transitionDuration": "{transitionDuration}"
- },
- "separator": {
- "background": "{content.borderColor}",
- "activeBackground": "{formField.focusBorderPrimaryColor}",
- "margin": "0 0 0 1.625rem",
- "size": "0.0625rem"
- },
- "step": {
- "padding": "0.4375rem",
- "gap": "0.4375rem"
- },
- "stepHeader": {
- "padding": "0",
- "borderRadius": "0",
- "gap": "0.4375rem",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "stepTitle": {
- "color": "{text.color}",
- "activeColor": "{text.color}",
- "fontWeight": "{fonts.fontWeight.regular}"
- },
- "stepNumber": {
- "background": "{content.background}",
- "activeBackground": "{primary.color}",
- "borderColor": "{content.borderColor}",
- "activeBorderColor": "{primary.color}",
- "color": "{text.color}",
- "activeColor": "{text.extend.colorPrimaryStatic}",
- "size": "1.3125rem",
- "fontSize": "{fonts.fontSize.base}",
- "fontWeight": "{fonts.fontWeight.bold}",
- "borderRadius": "{content.borderRadius}",
- "shadow": "none"
- },
- "steppanels": {
- "padding": "0.875rem"
- },
- "steppanel": {
- "background": "{content.background}",
- "color": "{content.color}",
- "padding": "0",
- "indent": "0"
- }
- },
- "steps": {
- "itemLink": {
- "gap": "0.5rem"
- },
- "itemLabel": {
- "fontWeight": "{fonts.fontWeight.regular}"
- },
- "itemNumber": {
- "background": "{content.background}",
- "size": "2.25rem",
- "fontSize": "{fonts.fontSize.base}",
- "fontWeight": "{fonts.fontWeight.bold}",
- "borderRadius": "50%",
- "shadow": "none"
- }
- },
- "tabs": {
- "colorScheme": {
- "light": {
- "navButton": {
- "shadow": "0px 0px 10px 50px rgba(255, 255, 255, 0.6)"
- },
- "tab": {
- "background": "{transparent}",
- "hoverBackground": "{transparent}",
- "activeBackground": "{transparent}"
- }
- }
- },
- "root": {
- "transitionDuration": "{transitionDuration}"
- },
- "tablist": {
- "borderWidth": "0 0 2px 0",
- "background": "{transparent}",
- "borderColor": "{content.borderColor}"
- },
- "tab": {
- "borderWidth": "0",
- "borderColor": "{content.borderColor}",
- "hoverBorderColor": "{content.borderColor}",
- "activeBorderColor": "{formField.focusBorderPrimaryColor}",
- "color": "{text.mutedColor}",
- "hoverColor": "{text.color}",
- "activeColor": "{text.color}",
- "padding": "0.875rem",
- "fontWeight": "{fonts.fontWeight.demibold}",
- "margin": "0 0 -1px 0",
- "gap": "0.4375rem",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "tabpanel": {
- "background": "{transparent}",
- "color": "{text.color}",
- "padding": "0.875rem",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "navButton": {
- "background": "{content.background}",
- "color": "{content.color}",
- "hoverColor": "{content.hoverColor}",
- "width": "1.3125rem",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "activeBar": {
- "height": "0.125rem",
- "bottom": "-1",
- "background": "{content.color}"
- }
- },
- "toast": {
- "colorScheme": {
- "light": {
- "info": {
- "background": "{info.50}",
- "borderColor": "{info.500}",
- "color": "{text.color}",
- "detailColor": "{text.color}",
- "shadow": "{overlay.popover.shadow}",
- "closeButton": {
- "hoverBackground": "{info.200}",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- }
- },
- "success": {
- "background": "{success.50}",
- "borderColor": "{success.500}",
- "color": "{text.color}",
- "detailColor": "{text.color}",
- "shadow": "{overlay.popover.shadow}",
- "closeButton": {
- "hoverBackground": "{success.200}",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- }
- },
- "warn": {
- "background": "{warn.50}",
- "borderColor": "{warn.500}",
- "color": "{text.color}",
- "detailColor": "{text.color}",
- "shadow": "{overlay.popover.shadow}",
- "closeButton": {
- "hoverBackground": "{warn.200}",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- }
- },
- "error": {
- "background": "{error.50}",
- "borderColor": "{error.500}",
- "color": "{text.color}",
- "detailColor": "{text.color}",
- "shadow": "{overlay.popover.shadow}",
- "closeButton": {
- "hoverBackground": "{error.200}",
- "focusRing": {
- "color": "{focusRing.color}",
- "shadow": "none"
- }
- }
- },
- "secondary": {
- "shadow": "{overlay.popover.shadow}"
- },
- "contrast": {
- "shadow": "{overlay.popover.shadow}"
- }
- }
- },
- "extend": {
- "extInfo": {
- "color": "{info.500}",
- "closeButton": {
- "color": "{info.500}",
- "borderColor": "{info.500}"
- },
- "caption": {
- "color": "{text.color}"
- }
- },
- "extAccentLine": {
- "width": "0.21875rem"
- },
- "extCloseButton": {
- "width": "0.0625rem"
- },
- "extSuccess": {
- "color": "{success.500}",
- "closeButton": {
- "color": "{success.500}",
- "borderColor": "{success.500}"
- },
- "caption": {
- "color": "{text.color}"
- }
- },
- "extWarn": {
- "color": "{warn.500}",
- "closeButton": {
- "color": "{warn.500}",
- "borderColor": "{warn.500}"
- },
- "caption": {
- "color": "{text.color}"
- }
- },
- "extError": {
- "color": "{error.500}",
- "closeButton": {
- "color": "{error.500}",
- "borderColor": "{error.500}"
- },
- "caption": {
- "color": "{text.color}"
- }
- }
- },
- "root": {
- "width": "{sizingToast.width}",
- "borderWidth": "0.0625rem",
- "borderRadius": "{content.borderRadius}",
- "transitionDuration": "{transitionDuration}"
- },
- "icon": {
- "size": "1.96875rem"
- },
- "content": {
- "padding": "0.875rem",
- "gap": "0.875rem"
- },
- "text": {
- "gap": "0.21875rem"
- },
- "summary": {
- "fontWeight": "{fonts.fontWeight.bold}",
- "fontSize": "{fonts.fontSize.base}"
- },
- "detail": {
- "fontWeight": "{fonts.fontWeight.regular}",
- "fontSize": "{fonts.fontSize.sm}"
- },
- "closeButton": {
- "width": "1.75rem",
- "height": "1.75rem",
- "borderRadius": "{borderRadius.md}",
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "offset": "{focusRing.offset}"
- }
- },
- "closeIcon": {
- "size": "0.875rem"
- }
- },
- "tag": {
- "colorScheme": {
- "light": {
- "primary": {
- "background": "{primary.500}",
- "color": "{text.color}"
- },
- "secondary": {
- "background": "{surface.200}",
- "color": "{text.color}"
- },
- "success": {
- "background": "{success.400}",
- "color": "{success.900}"
- },
- "info": {
- "background": "{info.300}",
- "color": "{info.900}"
- },
- "warn": {
- "background": "{warn.300}",
- "color": "{warn.900}"
- },
- "danger": {
- "background": "{error.300}",
- "color": "{error.900}"
- }
- }
- },
- "root": {
- "fontSize": "{fonts.fontSize.xs}",
- "fontWeight": "{fonts.fontWeight.regular}",
- "padding": "0.285rem 0.5rem",
- "gap": "0.21875rem",
- "borderRadius": "{borderRadius.sm}",
- "roundedBorderRadius": "{borderRadius.xl}"
- },
- "icon": {
- "size": "0.765625rem"
- }
- },
- "textarea": {
- "extend": {
- "readonlyBackground": "{formField.readonlyBackground}"
- },
- "root": {
- "background": "{formField.background}",
- "disabledBackground": "{formField.disabledBackground}",
- "filledBackground": "{formField.filledBackground}",
- "filledHoverBackground": "{formField.filledHoverBackground}",
- "filledFocusBackground": "{formField.filledFocusBackground}",
- "borderColor": "{formField.borderColor}",
- "hoverBorderColor": "{formField.hoverBorderSecondaryColor}",
- "focusBorderColor": "{formField.focusBorderSecondaryColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "color": "{formField.color}",
- "disabledColor": "{formField.disabledColor}",
- "placeholderColor": "{formField.placeholderColor}",
- "invalidPlaceholderColor": "{formField.invalidPlaceholderColor}",
- "shadow": "{formField.shadow}",
- "paddingX": "{formField.paddingX}",
- "paddingY": "{formField.paddingY}",
- "borderRadius": "{formField.borderRadius}",
- "transitionDuration": "{formField.transitionDuration}",
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- }
- },
- "sm": {
- "fontSize": "{fonts.fontSize.base}",
- "paddingX": "{formField.sm.paddingX}",
- "paddingY": "{formField.sm.paddingY}"
- },
- "lg": {
- "fontSize": "{fonts.fontSize.base}",
- "paddingX": "{formField.lg.paddingX}",
- "paddingY": "{formField.lg.paddingY}"
- }
- },
- "tieredmenu": {
- "extend": {
- "extSubmenu": {
- "borderColor": "{content.borderColor}",
- "background": "{content.background}"
- },
- "extItem": {
- "caption": {
- "gap": "0.21875rem",
- "color": "{text.mutedColor}"
- }
- }
- },
- "root": {
- "background": "{transparent}",
- "borderColor": "{transparent}",
- "color": "{content.color}",
- "borderRadius": "{content.borderRadius}",
- "shadow": "{overlay.navigation.shadow}",
- "transitionDuration": "{transitionDuration}"
- },
- "list": {
- "padding": "{navigation.list.padding}",
- "gap": "{navigation.list.gap}"
- },
- "item": {
- "focusBackground": "{navigation.item.focusBackground}",
- "activeBackground": "{navigation.item.activeBackground}",
- "color": "{navigation.item.color}",
- "focusColor": "{navigation.item.focusColor}",
- "activeColor": "{navigation.item.activeColor}",
- "padding": "{navigation.item.padding}",
- "borderRadius": "{navigation.item.borderRadius}",
- "gap": "{navigation.item.gap}",
- "icon": {
- "color": "{navigation.item.icon.color}",
- "focusColor": "{navigation.item.icon.focusColor}",
- "activeColor": "{navigation.item.icon.activeColor}"
- }
- },
- "submenu": {
- "mobileIndent": "0.65625rem"
- },
- "separator": {
- "borderColor": "{content.borderColor}"
- }
- },
- "timeline": {
- "event": {
- "minHeight": "2.65625rem"
- },
- "vertical": {
- "eventContent": {
- "padding": "0 1rem"
- }
- },
- "horizontal": {
- "eventContent": {
- "padding": "1rem 0"
- }
- },
- "eventMarker": {
- "size": "0.875rem",
- "borderRadius": "{content.borderRadius}",
- "borderWidth": "0.21875rem",
- "background": "{content.background}",
- "borderColor": "{primary.color}",
- "content": {
- "borderRadius": "{content.borderRadius}",
- "size": "0.65625rem",
- "background": "{transparent}",
- "insetShadow": "none"
- }
- },
- "eventConnector": {
- "color": "{content.borderColor}",
- "size": "0.0625rem"
- }
- },
- "togglebutton": {
- "colorScheme": {
- "light": {
- "root": {
- "background": "{surface.200}"
- }
- }
- },
- "extend": {
- "gap": "0.65625rem",
- "extXlg": {
- "padding": "1.25rem 1.5rem",
- "iconOnlyWidth": "3.5625rem"
- },
- "iconOnlyWidth": "2.1875rem",
- "extSm": {
- "iconOnlyWidth": "1.875rem"
- },
- "hoverBorderColor": "{surface.300}",
- "checkedHoverColor": "{text.extend.colorInverted}",
- "checkedHoverBackground": "{surface.800}",
- "checkedHoverBorderColor": "{surface.800}",
- "extLg": {
- "iconOnlyWidth": "3.125rem"
- }
- },
- "root": {
- "padding": "0.5rem 1rem",
- "borderRadius": "{borderRadius.rounded}",
- "gap": "0.4375rem",
- "fontWeight": "{fonts.fontWeight.demibold}",
- "hoverBackground": "{surface.300}",
- "borderColor": "{surface.200}",
- "color": "{text.color}",
- "hoverColor": "{text.color}",
- "checkedBackground": "{surface.900}",
- "checkedColor": "{text.extend.colorInverted}",
- "checkedBorderColor": "{surface.900}",
- "disabledBackground": "{formField.disabledBackground}",
- "disabledBorderColor": "{formField.disabledBackground}",
- "disabledColor": "{formField.disabledColor}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{formField.focusRing.color}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- },
- "sm": {
- "fontSize": "{formField.sm.fontSize}",
- "padding": "0.75rem 0.25rem"
- },
- "lg": {
- "fontSize": "{formField.sm.fontSize}",
- "padding": "1rem 1.5rem"
- },
- "transitionDuration": "{formField.transitionDuration}"
- },
- "icon": {
- "color": "{text.color}",
- "hoverColor": "{text.color}",
- "checkedColor": "{text.extend.colorInverted}",
- "disabledColor": "{formField.disabledColor}"
- },
- "content": {
- "checkedBackground": "{transparent}",
- "checkedShadow": "none",
- "padding": "0",
- "borderRadius": "0",
- "sm": {
- "padding": "0"
- },
- "lg": {
- "padding": "0"
- }
- }
- },
- "toggleswitch": {
- "colorScheme": {
- "light": {
- "root": {
- "background": "{surface.400}",
- "hoverBackground": "{surface.500}",
- "disabledBackground": "{formField.disabledBackground}",
- "checkedBackground": "{surface.900}",
- "checkedHoverBackground": "{surface.500}"
- },
- "handle": {
- "background": "{formField.backgroundHandler}",
- "hoverBackground": "{formField.backgroundHandler}",
- "disabledBackground": "{formField.disabledColor}",
- "checkedBackground": "{surface.0}",
- "checkedHoverBackground": "{surface.0}",
- "color": "{text.color}",
- "hoverColor": "{text.color}",
- "checkedColor": "{text.color}",
- "checkedHoverColor": "{text.color}"
- }
- }
- },
- "root": {
- "width": "2.1875rem",
- "height": "1.3125rem",
- "borderRadius": "{borderRadius.xl}",
- "gap": "0.125rem",
- "borderWidth": "0",
- "shadow": "none",
- "focusRing": {
- "width": "{formField.focusRing.width}",
- "style": "{formField.focusRing.style}",
- "color": "{primary.200}",
- "offset": "{formField.focusRing.offset}",
- "shadow": "{formField.shadow}"
- },
- "borderColor": "{transparent}",
- "hoverBorderColor": "{transparent}",
- "checkedBorderColor": "{transparent}",
- "checkedHoverBorderColor": "{transparent}",
- "invalidBorderColor": "{formField.invalidBorderColor}",
- "transitionDuration": "{formField.transitionDuration}",
- "slideDuration": "0.2s"
- },
- "handle": {
- "borderRadius": "6.25rem",
- "size": "1.09375rem"
- }
- },
- "tooltip": {
- "colorScheme": {
- "light": {
- "root": {
- "background": "{surface.900}",
- "color": "{text.extend.colorInverted}"
- }
- }
- },
- "root": {
- "maxWidth": "14.875rem",
- "gutter": "0.21875rem",
- "shadow": "{overlay.popover.shadow}",
- "padding": "0.5rem 1rem",
- "borderRadius": "{overlay.popover.borderRadius}"
- }
- },
- "tree": {
- "root": {
- "background": "{content.background}",
- "color": "{content.color}",
- "padding": "1rem",
- "gap": "2px",
- "indent": "1rem"
- },
- "node": {
- "padding": "0.375rem 0.625rem",
- "color": "{text.color}",
- "selectedColor": "{text.extend.colorInverted}",
- "gap": "0.25rem"
- },
- "nodeIcon": {
- "selectedColor": "{text.extend.colorInverted}"
- },
- "nodeToggleButton": {
- "borderRadius": "50%",
- "size": "1.75rem",
- "selectedHoverBackground": "{surface.900}"
- },
- "loadingIcon": {
- "size": "2rem"
- },
- "filter": {
- "margin": "0 0 0.5rem 0"
- }
- },
- "overlaybadge": {
- "root": {
- "outline": {
- "width": "0",
- "color": "{transparent}"
- }
- }
- }
-}
diff --git a/src/prime-preset/tokens/components.ts b/src/prime-preset/tokens/components.ts
new file mode 100644
index 0000000..865adf1
--- /dev/null
+++ b/src/prime-preset/tokens/components.ts
@@ -0,0 +1,3716 @@
+import { buttonCss } from './components/button';
+
+export default {
+ accordion: {
+ extend: {
+ extHeader: {
+ iconSize: '{controls.iconOnly.300}',
+ gap: '{controls.gap.100}',
+ },
+ },
+ colorScheme: {
+ light: {
+ header: {
+ background: '{transparent}',
+ hoverBackground: '{transparent}',
+ activeBackground: '{transparent}',
+ activeHoverBackground: '{transparent}',
+ },
+ },
+ },
+ header: {
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ activeColor: '{text.color}',
+ activeHoverColor: '{text.hoverColor}',
+ borderColor: '{transparent}',
+ padding: '{navigation.padding.300} 0 {navigation.padding.300} 0',
+ fontWeight: '{fonts.fontWeight.bold}',
+ borderRadius: '{borderRadius.none}',
+ borderWidth: '{borderWidth.none}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: 'inset {focus.ring.shadow}',
+ },
+ toggleIcon: {
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ activeColor: '{text.color}',
+ activeHoverColor: '{text.hoverColor}',
+ },
+ last: {
+ bottomBorderRadius: '{borderRadius.none}',
+ activeBottomBorderRadius: '{borderRadius.none}',
+ },
+ first: {
+ borderWidth: '{borderWidth.none}',
+ topBorderRadius: '{borderRadius.none}',
+ },
+ },
+ root: {
+ transitionDuration: '{controls.transitionDuration}',
+ },
+ panel: {
+ borderWidth:
+ '{borderWidth.none} {borderWidth.none} {navigation.width.200} {borderWidth.none}',
+ borderColor: '{form.borderColor}',
+ },
+ content: {
+ borderWidth:
+ '{content.borderWidth} {borderWidth.none} {borderWidth.none} {borderWidth.none}',
+ borderColor: '{transparent}',
+ background: '{transparent}',
+ color: '{text.color}',
+ padding:
+ '0 {content.padding.400} {content.padding.300} {content.padding.400}',
+ },
+ },
+ autocomplete: {
+ extend: {
+ extOption: {
+ gap: '{form.gap.200}',
+ },
+ extOptionGroup: {
+ gap: '{form.gap.200}',
+ },
+ },
+ colorScheme: {
+ light: {
+ chip: {
+ focusBackground: '{chip.colorScheme.light.root.background}',
+ focusColor: '{chip.colorScheme.light.root.color}',
+ },
+ dropdown: {
+ background: '{form.background}',
+ hoverBackground: '{form.background}',
+ activeBackground: '{form.background}',
+ color: '{form.color}',
+ hoverColor: '{form.color}',
+ activeColor: '{form.color}',
+ },
+ },
+ },
+ root: {
+ background: '{form.background}',
+ disabledBackground: '{form.disabledBackground}',
+ filledBackground: '{form.filledBackground}',
+ filledHoverBackground: '{form.filledHoverBackground}',
+ filledFocusBackground: '{form.filledFocusBackground}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.hoverBorderSecondaryColor}',
+ focusBorderColor: '{form.focusBorderSecondaryColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ color: '{form.color}',
+ disabledColor: '{form.disabledColor}',
+ placeholderColor: '{form.placeholderColor}',
+ invalidPlaceholderColor: '{form.invalidPlaceholderColor}',
+ shadow: '0',
+ paddingX: '{form.padding.300}',
+ paddingY: '{form.padding.300}',
+ borderRadius: '{form.borderRadius.200}',
+ transitionDuration: '{form.transitionDuration}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '0',
+ },
+ },
+ overlay: {
+ background: '{overlay.select.background}',
+ borderColor: '{overlay.select.borderColor}',
+ borderRadius: '{overlay.select.borderRadius}',
+ color: '{overlay.select.color}',
+ shadow: '{form.shadow}',
+ },
+ list: {
+ padding: '{list.padding}',
+ gap: '{list.gap.100}',
+ },
+ option: {
+ focusBackground: '{list.option.focusBackground}',
+ selectedBackground: '{list.option.selectedBackground}',
+ selectedFocusBackground: '{list.option.selectedFocusBackground}',
+ color: '{list.option.color}',
+ focusColor: '{list.option.focusColor}',
+ selectedColor: '{list.option.selectedColor}',
+ selectedFocusColor: '{list.option.selectedFocusColor}',
+ padding: '{list.option.padding}',
+ borderRadius: '{list.option.borderRadius}',
+ },
+ optionGroup: {
+ background: '{list.optionGroup.background}',
+ color: '{list.optionGroup.color}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ padding: '{list.optionGroup.padding}',
+ },
+ dropdown: {
+ width: '{form.width.full}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.hoverBorderSecondaryColor}',
+ activeBorderColor: '{form.focusBorderSecondaryColor}',
+ borderRadius: '{form.borderRadius.200}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '0',
+ },
+ sm: {
+ width: '{form.width.200}',
+ },
+ lg: {
+ width: '{form.width.400}',
+ },
+ },
+ chip: {
+ borderRadius: '{chip.root.borderRadius}',
+ },
+ emptyMessage: {
+ padding: '{list.option.padding}',
+ },
+ },
+ avatar: {
+ extend: {
+ borderColor: '{form.borderColor}',
+ circle: {
+ borderRadius: '{media.borderRadius.max}',
+ },
+ },
+ root: {
+ width: '{media.size.300}',
+ height: '{media.size.300}',
+ fontSize: '{fonts.fontSize.200}',
+ color: '{text.extend.colorPrimaryStatic}',
+ background: '{primary.color}',
+ borderRadius: '{media.borderRadius.200}',
+ },
+ icon: {
+ size: '{media.icon.size.100}',
+ },
+ group: {
+ borderColor: '{content.background}',
+ offset: '{media.padding.300}',
+ },
+ lg: {
+ width: '{media.size.400}',
+ height: '{media.size.400}',
+ fontSize: '{fonts.fontSize.300}',
+ icon: {
+ size: '{media.icon.size.100}',
+ },
+ group: {
+ offset: '{media.padding.300}',
+ },
+ },
+ xl: {
+ width: '{media.size.500}',
+ height: '{media.size.500}',
+ icon: {
+ size: '{media.icon.size.200}',
+ },
+ group: {
+ offset: '{media.padding.600}',
+ },
+ fontSize: '{fonts.fontSize.500}',
+ },
+ },
+ badge: {
+ extend: {
+ extDot: {
+ success: {
+ background: '{colors.solid.green.400}',
+ },
+ info: {
+ background: '{info.400}',
+ },
+ warn: {
+ background: '{warn.400}',
+ },
+ danger: {
+ background: '{error.400}',
+ },
+ lg: {
+ size: '{feedback.width.400}',
+ },
+ xlg: {
+ size: '{feedback.width.500}',
+ },
+ },
+ ext: {
+ padding: '0rem',
+ },
+ },
+ colorScheme: {
+ light: {
+ primary: {
+ color: '{text.extend.colorPrimaryStatic}',
+ background: '{primary.color}',
+ },
+ secondary: {
+ color: '{text.extend.colorInverted}',
+ background: '{surface.900}',
+ },
+ success: {
+ color: '{success.900}',
+ background: '{success.300}',
+ },
+ info: {
+ color: '{info.900}',
+ background: '{info.300}',
+ },
+ warn: {
+ color: '{warn.900}',
+ background: '{warn.300}',
+ },
+ danger: {
+ color: '{error.900}',
+ background: '{error.300}',
+ },
+ },
+ },
+ root: {
+ borderRadius: '{feedback.width.300}',
+ padding: '{feedback.padding.100}',
+ fontSize: '{fonts.fontSize.100}',
+ fontWeight: '{fonts.fontWeight.regular}',
+ minWidth: '{feedback.width.600}',
+ height: '{feedback.height.500}',
+ },
+ dot: {
+ size: '{feedback.width.300}',
+ },
+ sm: {
+ fontSize: '{fonts.fontSize.100}',
+ minWidth: '0rem',
+ height: '0rem',
+ },
+ lg: {
+ fontSize: '{fonts.fontSize.100}',
+ minWidth: '{feedback.width.650}',
+ height: '{feedback.height.600}',
+ },
+ xl: {
+ fontSize: '{fonts.fontSize.100}',
+ minWidth: '{feedback.width.700}',
+ height: '{feedback.height.650}',
+ },
+ },
+ breadcrumb: {
+ extend: {
+ hoverBackground: '{surface.100}',
+ iconSize: '{navigation.size.300}',
+ extItem: {
+ padding: '{navigation.padding.100}',
+ },
+ },
+ root: {
+ padding: '0rem',
+ background: '{transparent}',
+ gap: '0rem',
+ transitionDuration: '{form.transitionDuration}',
+ },
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ item: {
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ borderRadius: '{navigation.borderRadius}',
+ gap: '{navigation.item.gap}',
+ icon: {
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ },
+ },
+ separator: {
+ color: '{text.color}',
+ },
+ },
+ button: {
+ extend: {
+ disabledBackground: '{form.disabledBackground}',
+ extOutlined: {
+ danger: {
+ focusBackground: '{transparent}',
+ },
+ warn: {
+ focusBackground: '{transparent}',
+ },
+ info: {
+ focusBackground: '{transparent}',
+ },
+ help: {
+ focusBackground: '{transparent}',
+ },
+ success: {
+ focusBackground: '{transparent}',
+ },
+ },
+ disabledColor: '{form.disabledColor}',
+ extText: {
+ danger: {
+ focusBackground: '{transparent}',
+ },
+ warn: {
+ focusBackground: '{transparent}',
+ },
+ info: {
+ focusBackground: '{transparent}',
+ },
+ help: {
+ focusBackground: '{transparent}',
+ },
+ success: {
+ focusBackground: '{transparent}',
+ },
+ },
+ extLink: {
+ background: '{transparent}',
+ colorHover: '{text.hoverColor}',
+ paddingX: '0rem',
+ paddingY: '{controls.padding.100}',
+ sm: {
+ iconOnlyWidth: '{controls.iconOnly.200}',
+ },
+ base: {
+ iconOnlyWidth: '{controls.iconOnly.400}',
+ },
+ lg: {
+ iconOnlyWidth: '{controls.iconOnly.500}',
+ },
+ xlg: {
+ iconOnlyWidth: '{controls.iconOnly.600}',
+ },
+ },
+ extSm: {
+ borderRadius: '{controls.borderRadius.100}',
+ gap: '{controls.gap.100}',
+ },
+ extLg: {
+ borderRadius: '{controls.borderRadius.200}',
+ gap: '{controls.gap.200}',
+ height: '{controls.iconOnly.850}',
+ },
+ extXlg: {
+ borderRadius: '{controls.borderRadius.200}',
+ gap: '{controls.gap.200}',
+ iconOnlyWidth: '{controls.iconOnly.900}',
+ paddingX: '{controls.padding.600}',
+ paddingY: '{controls.padding.500}',
+ height: '{controls.iconOnly.900}',
+ },
+ borderWidth: '{controls.width.100}',
+ iconSize: {
+ sm: '{controls.iconOnly.200}',
+ md: '{controls.iconOnly.300}',
+ lg: '{controls.iconOnly.400}',
+ },
+ },
+ colorScheme: {
+ light: {
+ root: {
+ primary: {
+ background: '{primary.color}',
+ hoverBackground: '{primary.hoverColor}',
+ activeBackground: '{primary.activeColor}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.extend.colorPrimaryStatic}',
+ hoverColor: '{text.extend.colorPrimaryStatic}',
+ activeColor: '{text.extend.colorPrimaryStatic}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ secondary: {
+ background: '{surface.900}',
+ hoverBackground: '{surface.800}',
+ activeBackground: '{surface.700}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.extend.colorInverted}',
+ hoverColor: '{text.extend.colorInverted}',
+ activeColor: '{text.extend.colorInverted}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ contrast: {
+ background: '{surface.200}',
+ hoverBackground: '{surface.300}',
+ activeBackground: '{surface.400}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.color}',
+ hoverColor: '{text.color}',
+ activeColor: '{text.color}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ info: {
+ background: '{info.300}',
+ hoverBackground: '{info.400}',
+ activeBackground: '{info.500}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{info.900}',
+ hoverColor: '{info.950}',
+ activeColor: '{info.900}',
+ },
+ success: {
+ background: '{success.300}',
+ hoverBackground: '{success.400}',
+ activeBackground: '{success.500}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{success.900}',
+ hoverColor: '{success.950}',
+ activeColor: '{success.900}',
+ },
+ warn: {
+ background: '{warn.300}',
+ hoverBackground: '{warn.400}',
+ activeBackground: '{warn.500}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{warn.900}',
+ hoverColor: '{warn.950}',
+ activeColor: '{warn.900}',
+ },
+ help: {
+ background: '{help.300}',
+ hoverBackground: '{help.400}',
+ activeBackground: '{help.500}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{help.900}',
+ hoverColor: '{help.950}',
+ activeColor: '{help.900}',
+ },
+ danger: {
+ background: '{error.300}',
+ hoverBackground: '{error.400}',
+ activeBackground: '{error.500}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{error.900}',
+ hoverColor: '{error.950}',
+ activeColor: '{error.900}',
+ },
+ },
+ outlined: {
+ primary: {
+ hoverBackground: '{primary.hoverBackground}',
+ activeBackground: '{primary.activeBackground}',
+ borderColor: '{primary.borderColor}',
+ color: '{primary.color}',
+ },
+ success: {
+ hoverBackground: '{success.100}',
+ activeBackground: '{success.200}',
+ borderColor: '{success.600}',
+ color: '{success.600}',
+ },
+ info: {
+ hoverBackground: '{info.100}',
+ activeBackground: '{info.200}',
+ borderColor: '{info.600}',
+ color: '{info.600}',
+ },
+ warn: {
+ hoverBackground: '{warn.100}',
+ activeBackground: '{warn.200}',
+ borderColor: '{warn.600}',
+ color: '{warn.600}',
+ },
+ help: {
+ hoverBackground: '{help.100}',
+ activeBackground: '{help.200}',
+ borderColor: '{help.600}',
+ color: '{help.600}',
+ },
+ danger: {
+ hoverBackground: '{error.100}',
+ activeBackground: '{error.200}',
+ borderColor: '{error.600}',
+ color: '{error.600}',
+ },
+ },
+ text: {
+ primary: {
+ hoverBackground: '{surface.100}',
+ activeBackground: '{surface.200}',
+ color: '{text.color}',
+ },
+ success: {
+ hoverBackground: '{success.100}',
+ activeBackground: '{success.200}',
+ color: '{success.600}',
+ },
+ info: {
+ hoverBackground: '{info.100}',
+ activeBackground: '{info.200}',
+ color: '{info.600}',
+ },
+ warn: {
+ hoverBackground: '{warn.100}',
+ activeBackground: '{warn.200}',
+ color: '{warn.600}',
+ },
+ help: {
+ hoverBackground: '{help.100}',
+ activeBackground: '{help.200}',
+ color: '{help.600}',
+ },
+ danger: {
+ hoverBackground: '{error.100}',
+ activeBackground: '{error.200}',
+ color: '{error.600}',
+ },
+ },
+ link: {
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ activeColor: '{text.mutedColor}',
+ },
+ },
+ dark: {
+ root: {
+ primary: {
+ background: '{primary.color}',
+ hoverBackground: '{primary.hoverColor}',
+ activeBackground: '{primary.activeColor}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.extend.colorPrimaryStatic}',
+ hoverColor: '{text.extend.colorPrimaryStatic}',
+ activeColor: '{text.extend.colorPrimaryStatic}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ secondary: {
+ background: '{surface.200}',
+ hoverBackground: '{surface.300}',
+ activeBackground: '{surface.400}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{surface.950}',
+ hoverColor: '{surface.950}',
+ activeColor: '{surface.950}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ contrast: {
+ background: '{surface.950}',
+ hoverBackground: '{surface.900}',
+ activeBackground: '{surface.800}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{surface.0}',
+ hoverColor: '{surface.0}',
+ activeColor: '{surface.0}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ info: {
+ background: '{info.500}',
+ hoverBackground: '{info.400}',
+ activeBackground: '{info.300}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.extend.colorPrimaryStatic}',
+ hoverColor: '{text.extend.colorPrimaryStatic}',
+ activeColor: '{text.extend.colorPrimaryStatic}',
+ },
+ success: {
+ background: '{success.500}',
+ hoverBackground: '{success.400}',
+ activeBackground: '{success.300}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.extend.colorPrimaryStatic}',
+ hoverColor: '{text.extend.colorPrimaryStatic}',
+ activeColor: '{text.extend.colorPrimaryStatic}',
+ },
+ warn: {
+ background: '{warn.500}',
+ hoverBackground: '{warn.400}',
+ activeBackground: '{warn.300}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.extend.colorPrimaryStatic}',
+ hoverColor: '{text.extend.colorPrimaryStatic}',
+ activeColor: '{text.extend.colorPrimaryStatic}',
+ },
+ help: {
+ background: '{help.500}',
+ hoverBackground: '{help.400}',
+ activeBackground: '{help.300}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.extend.colorPrimaryStatic}',
+ hoverColor: '{text.extend.colorPrimaryStatic}',
+ activeColor: '{text.extend.colorPrimaryStatic}',
+ },
+ danger: {
+ background: '{error.500}',
+ hoverBackground: '{error.400}',
+ activeBackground: '{error.300}',
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ activeBorderColor: '{transparent}',
+ color: '{text.extend.colorPrimaryStatic}',
+ hoverColor: '{text.extend.colorPrimaryStatic}',
+ activeColor: '{text.extend.colorPrimaryStatic}',
+ },
+ },
+ outlined: {
+ primary: {
+ hoverBackground: '{primary.hoverBackground}',
+ activeBackground: '{primary.activeBackground}',
+ borderColor: '{primary.borderColor}',
+ color: '{primary.color}',
+ },
+ success: {
+ hoverBackground: '{success.950}',
+ activeBackground: '{success.900}',
+ borderColor: '{success.500}',
+ color: '{success.500}',
+ },
+ info: {
+ hoverBackground: '{info.950}',
+ activeBackground: '{info.900}',
+ borderColor: '{info.500}',
+ color: '{info.500}',
+ },
+ warn: {
+ hoverBackground: '{warn.950}',
+ activeBackground: '{warn.900}',
+ borderColor: '{warn.500}',
+ color: '{warn.500}',
+ },
+ help: {
+ hoverBackground: '{help.950}',
+ activeBackground: '{help.900}',
+ borderColor: '{help.500}',
+ color: '{help.500}',
+ },
+ danger: {
+ hoverBackground: '{error.950}',
+ activeBackground: '{error.900}',
+ borderColor: '{error.500}',
+ color: '{error.500}',
+ },
+ },
+ text: {
+ primary: {
+ hoverBackground: '{surface.800}',
+ activeBackground: '{surface.700}',
+ color: '{text.color}',
+ },
+ success: {
+ hoverBackground: '{success.950}',
+ activeBackground: '{success.900}',
+ color: '{success.500}',
+ },
+ info: {
+ hoverBackground: '{info.950}',
+ activeBackground: '{info.900}',
+ color: '{info.500}',
+ },
+ warn: {
+ hoverBackground: '{warn.950}',
+ activeBackground: '{warn.900}',
+ color: '{warn.500}',
+ },
+ help: {
+ hoverBackground: '{help.950}',
+ activeBackground: '{help.900}',
+ color: '{help.500}',
+ },
+ danger: {
+ hoverBackground: '{error.950}',
+ activeBackground: '{error.900}',
+ color: '{error.500}',
+ },
+ },
+ link: {
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ activeColor: '{text.mutedColor}',
+ },
+ },
+ },
+ root: {
+ borderRadius: '{controls.borderRadius.100}',
+ roundedBorderRadius: '{controls.borderRadius.max}',
+ gap: '{controls.gap.100}',
+ fontSize: '{fonts.fontSize.200}',
+ paddingX: '{controls.padding.400}',
+ paddingY: '{controls.padding.200}',
+ iconOnlyWidth: '{controls.iconOnly.700}',
+ raisedShadow: 'none',
+ badgeSize: '{feedback.width.500}',
+ transitionDuration: '{controls.transitionDuration}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ offset: '{focusRing.offset}',
+ },
+ sm: {
+ fontSize: '{fonts.fontSize.200}',
+ iconOnlyWidth: '{controls.iconOnly.600}',
+ paddingX: '{controls.padding.300}',
+ paddingY: '{controls.padding.200}',
+ },
+ lg: {
+ fontSize: '{fonts.fontSize.500}',
+ iconOnlyWidth: '{controls.iconOnly.850}',
+ paddingX: '{controls.padding.600}',
+ paddingY: '{controls.padding.400}',
+ },
+ label: {
+ fontWeight: '{fonts.fontWeight.demibold}',
+ },
+ },
+ css: buttonCss,
+ },
+ card: {
+ extend: {
+ borderColor: '{content.borderColor}',
+ borderWidth: '{content.borderWidth}',
+ },
+ root: {
+ background: '{content.background}',
+ borderRadius: '{content.gap.400}',
+ color: '{content.color}',
+ },
+ body: {
+ padding: '{content.padding.300}',
+ gap: '{content.gap.400}',
+ },
+ caption: {
+ gap: '{content.gap.100}',
+ },
+ title: {
+ fontSize: '{fonts.fontSize.400}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ },
+ subtitle: {
+ color: '{text.mutedColor}',
+ },
+ },
+ carousel: {
+ colorScheme: {
+ light: {
+ indicator: {
+ background: '{surface.300}',
+ hoverBackground: '{surface.400}',
+ activeBackground: '{surface.900}',
+ },
+ },
+ },
+ root: {
+ transitionDuration: '{media.transitionDuration}',
+ },
+ content: {
+ gap: '{media.gap.200}',
+ },
+ indicatorList: {
+ padding: '{media.padding.400}',
+ gap: '{media.gap.200}',
+ },
+ indicator: {
+ width: '{controls.iconOnly.100}',
+ height: '{controls.iconOnly.100}',
+ borderRadius: '{media.borderRadius.400}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ checkbox: {
+ root: {
+ borderRadius: '{form.borderRadius.100}',
+ extend: {
+ borderWidth: '{form.borderWidth}',
+ },
+ width: '{form.size.400}',
+ height: '{form.size.400}',
+ background: '{form.background}',
+ checkedBackground: '{surface.900}',
+ checkedHoverBackground: '{surface.800}',
+ disabledBackground: '{form.disabledBackground}',
+ filledBackground: '{form.filledBackground}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.hoverBorderPrimaryColor}',
+ focusBorderColor: '{form.focusBorderPrimaryColor}',
+ checkedBorderColor: '{surface.900}',
+ checkedHoverBorderColor: '{surface.800}',
+ checkedFocusBorderColor: '{primary.color}',
+ checkedDisabledBorderColor: '{form.borderColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ shadow: '0',
+ focusRing: {
+ focusRing: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ sm: {
+ width: '{form.size.200}',
+ height: '{form.size.200}',
+ },
+ lg: {
+ width: '{form.size.350}',
+ height: '{form.size.350}',
+ },
+ transitionDuration: '{form.transitionDuration}',
+ },
+ icon: {
+ size: '{form.icon.300}',
+ color: '{form.color}',
+ checkedColor: '{primary.contrastColor}',
+ checkedHoverColor: '{primary.contrastColor}',
+ disabledColor: '{form.disabledColor}',
+ sm: {
+ size: '{form.icon.200}',
+ },
+ lg: {
+ size: '{form.icon.400}',
+ },
+ },
+ },
+ chip: {
+ extend: {
+ borderColor: '{transparent}',
+ borderWidth: '{controls.width.100}',
+ },
+ root: {
+ borderRadius: '{media.borderRadius.100}',
+ paddingX: '{media.padding.200}',
+ paddingY: '{media.padding.100}',
+ gap: '{media.gap.200}',
+ transitionDuration: '{media.transitionDuration}',
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: '{surface.200}',
+ color: '{text.color}',
+ },
+ icon: {
+ color: '{text.color}',
+ },
+ removeIcon: {
+ color: '{text.color}',
+ },
+ },
+ },
+ image: {
+ width: '0rem',
+ height: '0rem',
+ },
+ icon: {
+ size: '{media.icon.size.100}',
+ },
+ removeIcon: {
+ size: '{media.icon.size.100}',
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ confirmdialog: {
+ extend: {
+ extIcon: {
+ success: '{success.500}',
+ info: '{info.500}',
+ help: '{help.500}',
+ warn: '{warn.500}',
+ danger: '{error.500}',
+ },
+ },
+ icon: {
+ size: '{overlay.icon.size.200}',
+ color: '{overlay.modal.color}',
+ },
+ content: {
+ gap: '0rem',
+ },
+ },
+ confirmpopup: {
+ root: {
+ background: '{overlay.popover.background}',
+ color: '{overlay.popover.color}',
+ shadow: '{overlay.popover.shadow}',
+ gutter: '{overlay.gap.300}',
+ arrowOffset: '{overlay.modal.padding.200}',
+ },
+ content: {
+ padding: '{overlay.popover.padding.100}',
+ gap: '{overlay.gap.400}',
+ },
+ icon: {
+ size: '{overlay.icon.size.200}',
+ color: '{overlay.popover.color}',
+ },
+ footer: {
+ gap: '{overlay.gap.200}',
+ padding:
+ '0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}',
+ },
+ },
+ contextmenu: {
+ root: {
+ background: '{content.background}',
+ color: '{content.color}',
+ shadow: '{navigation.shadow}',
+ },
+ list: {
+ padding: '{navigation.list.padding.md} 0',
+ gap: '{navigation.list.gap}',
+ },
+ item: {
+ padding: '{navigation.item.padding}',
+ gap: '{navigation.item.gap}',
+ },
+ submenu: {
+ mobileIndent: '{navigation.submenu.padding}',
+ },
+ },
+ datatable: {
+ colorScheme: {
+ light: {
+ root: {
+ color: '{text.color}',
+ borderColor: '{content.borderColor}',
+ },
+ header: {
+ background: '{surface.50}',
+ color: '{text.color}',
+ },
+ headerCell: {
+ background: '{surface.50}',
+ hoverBackground: '{surface.100}',
+ color: '{text.color}',
+ },
+ footer: {
+ background: '{surface.100}',
+ color: '{text.color}',
+ },
+ footerCell: {
+ background: '{content.hoverBackground}',
+ color: '{text.color}',
+ },
+ row: {
+ stripedBackground: '{content.hoverBackground}',
+ },
+ bodyCell: {
+ selectedBorderColor: '{content.borderColor}',
+ },
+ },
+ },
+ extended: {
+ extHeaderCell: {
+ selectedHoverBackground: '{surface.800}',
+ },
+ extRow: {
+ selectedHoverBackground: '{surface.800}',
+ stripedHoverBackground: '{surface.100}',
+ },
+ },
+ root: {
+ transitionDuration: '{data.transitionDuration}',
+ },
+ header: {
+ borderColor: '{content.borderColor}',
+ borderWidth: '{data.width.100} 0 {data.width.100} 0',
+ padding: '{data.padding.400}',
+ sm: {
+ padding: '{data.padding.200}',
+ },
+ lg: {
+ padding: '{data.padding.500}',
+ },
+ },
+ headerCell: {
+ selectedBackground: '{highlight.background}',
+ borderColor: '{content.borderColor}',
+ hoverColor: '{text.extend.colorInverted}',
+ selectedColor: '{highlight.color}',
+ gap: '{data.gap.200}',
+ padding: '{data.padding.400}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: 'inset {focus.ring.shadow}',
+ },
+ sm: {
+ padding: '{data.padding.200}',
+ },
+ lg: {
+ padding: '{data.padding.500}',
+ },
+ },
+ columnTitle: {
+ fontWeight: '{fonts.fontWeight.bold}',
+ },
+ row: {
+ background: '{content.background}',
+ hoverBackground: '{content.hoverBackground}',
+ selectedBackground: '{highlight.background}',
+ color: '{content.color}',
+ hoverColor: '{content.hoverColor}',
+ selectedColor: '{highlight.color}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: 'inset {focus.ring.shadow}',
+ },
+ },
+ bodyCell: {
+ borderColor: '{content.borderColor}',
+ padding: '{data.padding.400}',
+ sm: {
+ padding: '{data.padding.200}',
+ },
+ lg: {
+ padding: '{data.padding.500}',
+ },
+ },
+ footerCell: {
+ borderColor: '{content.borderColor}',
+ padding: '{data.padding.400}',
+ sm: {
+ padding: '{data.padding.200}',
+ },
+ lg: {
+ padding: '{data.padding.500}',
+ },
+ },
+ columnFooter: {
+ fontWeight: '{fonts.fontWeight.bold}',
+ },
+ dropPoint: {
+ color: '{highlight.background}',
+ },
+ footer: {
+ borderColor: '{content.borderColor}',
+ borderWidth: '0 0 {data.width.100} 0',
+ padding: '{data.padding.400}',
+ sm: {
+ padding: '{data.padding.200}',
+ },
+ lg: {
+ padding: '{data.padding.500}',
+ },
+ },
+ columnResizer: {
+ width: '{data.width.300}',
+ },
+ resizeIndicator: {
+ width: '{data.width.100}',
+ color: '{highlight.background}',
+ },
+ sortIcon: {
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ size: '{data.icon.size.100}',
+ },
+ loadingIcon: {
+ size: '{data.icon.size.500}',
+ },
+ rowToggleButton: {
+ hoverBackground: '{content.hoverBackground}',
+ selectedHoverBackground: '{content.hoverBackground}',
+ color: '{text.color}',
+ hoverColor: '{text.color}',
+ selectedHoverColor: '{text.color}',
+ size: '{data.icon.size.500}',
+ borderRadius: '{content.borderRadius}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ filter: {
+ inlineGap: '{data.gap.200}',
+ rule: {
+ borderColor: '{content.borderColor}',
+ },
+ constraintList: {
+ padding: '{list.padding}',
+ gap: '{list.gap.100}',
+ },
+ constraint: {
+ focusBackground: '{list.option.focusBackground}',
+ selectedBackground: '{list.option.selectedBackground}',
+ selectedFocusBackground: '{list.option.selectedFocusBackground}',
+ color: '{list.option.color}',
+ focusColor: '{list.option.focusColor}',
+ selectedColor: '{list.option.selectedColor}',
+ selectedFocusColor: '{list.option.selectedFocusColor}',
+ padding: '{list.option.padding}',
+ borderRadius: '{list.option.borderRadius}',
+ separator: {
+ borderColor: '{content.borderColor}',
+ },
+ },
+ overlaySelect: {
+ background: '{overlay.select.background}',
+ color: '{overlay.select.color}',
+ borderColor: '{overlay.select.borderColor}',
+ borderRadius: '{overlay.select.borderRadius}',
+ shadow: '{overlay.select.shadow}',
+ },
+ overlayPopover: {
+ background: '{overlay.popover.background}',
+ color: '{overlay.popover.color}',
+ borderColor: '{overlay.select.borderColor}',
+ borderRadius: '{overlay.select.borderRadius}',
+ shadow: '{overlay.popover.shadow}',
+ padding: '{overlay.popover.padding.100}',
+ gap: '{list.gap.100}',
+ },
+ },
+ paginatorTop: {
+ borderColor: '{form.borderColor}',
+ borderWidth: '0 0 {data.width.100} 0',
+ },
+ paginatorBottom: {
+ borderWidth: '0 0 {data.width.100} 0',
+ borderColor: '{content.borderColor}',
+ },
+ },
+ dataview: {
+ root: {
+ borderWidth: '{data.width.100}',
+ borderRadius: '{data.borderRadius}',
+ padding: '0rem',
+ borderColor: '{content.borderColor}',
+ },
+ header: {
+ borderWidth: '0 0 {data.width.100} 0',
+ padding: '{data.padding.200} {data.padding.300}',
+ borderRadius: '0 0 0 0',
+ color: '{text.color}',
+ },
+ content: {
+ background: '{content.background}',
+ color: '{content.color}',
+ borderColor: '{content.borderColor}',
+ borderWidth: '0rem',
+ padding: '0rem',
+ borderRadius: '0',
+ },
+ footer: {
+ background: '{surface.100}',
+ color: '{text.color}',
+ borderWidth: '{data.width.100} 0 0 0',
+ padding: '{data.padding.200} {data.padding.300}',
+ borderRadius: '0 0 0 0',
+ },
+ paginatorTop: {
+ borderWidth: '0 0 {data.width.100} 0',
+ },
+ paginatorBottom: {
+ borderWidth: '{data.width.100} 0 0 0',
+ },
+ },
+ datepicker: {
+ extend: {
+ extDate: {
+ selectedHoverBackground: '{surface.800}',
+ },
+ extToday: {
+ hoverBackground: '{content.hoverBackground}',
+ borderColor: '{content.activeBorderColor}',
+ },
+ extTitle: {
+ width: '{form.width.500}',
+ },
+ extTimePicker: {
+ minWidth: '{form.width.400}',
+ color: '{content.color}',
+ },
+ },
+ colorScheme: {
+ light: {
+ dropdown: {
+ background: '{content.background}',
+ hoverBackground: '{navigation.item.focusBackground}',
+ activeBackground: '{navigation.item.activeBackground}',
+ color: '{navigation.item.color}',
+ hoverColor: '{navigation.item.focusColor}',
+ activeColor: '{navigation.item.activeColor}',
+ },
+ today: {
+ background: '{transparent}',
+ color: '{text.extend.colorPrimaryStatic}',
+ },
+ },
+ },
+ panel: {
+ background: '{content.background}',
+ borderColor: '{content.borderColor}',
+ color: '{content.color}',
+ borderRadius: '{content.borderRadius}',
+ shadow: '{overlay.popover.shadow}',
+ padding: '0rem',
+ },
+ header: {
+ background: '{content.background}',
+ borderColor: '{content.borderColor}',
+ color: '{content.color}',
+ padding: '{overlay.popover.padding.100}',
+ },
+ title: {
+ gap: '{form.gap.200}',
+ fontWeight: '{fonts.fontWeight.bold}',
+ },
+ selectMonth: {
+ hoverBackground: '{content.hoverBackground}',
+ color: '{content.color}',
+ hoverColor: '{content.hoverColor}',
+ borderRadius: '{content.borderRadius}',
+ padding: '{form.padding.200}',
+ },
+ inputIcon: {
+ color: '{form.floatLabelColor}',
+ },
+ dropdown: {
+ width: '{form.width.300}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.borderColor}',
+ activeBorderColor: '{form.borderColor}',
+ borderRadius: '{form.borderRadius.200}',
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ sm: {
+ width: '0rem',
+ },
+ lg: {
+ width: '0rem',
+ },
+ },
+ group: {
+ borderColor: '{content.borderColor}',
+ gap: '{overlay.popover.padding.100}',
+ },
+ selectYear: {
+ hoverBackground: '{content.hoverBackground}',
+ color: '{content.color}',
+ hoverColor: '{content.hoverColor}',
+ borderRadius: '{content.borderRadius}',
+ padding: '{overlay.select.padding}',
+ },
+ dayView: {
+ margin: '{overlay.popover.padding.100}',
+ },
+ weekDay: {
+ padding: '{form.padding.100}',
+ fontWeight: '{fonts.fontWeight.bold}',
+ color: '{content.color}',
+ },
+ date: {
+ hoverBackground: '{content.hoverBackground}',
+ selectedBackground: '{highlight.background}',
+ rangeSelectedBackground: '{list.option.focusBackground}',
+ color: '{content.color}',
+ hoverColor: '{content.color}',
+ selectedColor: '{text.extend.colorInverted}',
+ rangeSelectedColor: '{text.color}',
+ width: '{form.size.500}',
+ height: '{form.size.500}',
+ borderRadius: '{form.borderRadius.100}',
+ padding: '{form.padding.100}',
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ monthView: {
+ margin: '0 0 0 0',
+ },
+ month: {
+ padding: '0',
+ borderRadius: '0rem',
+ },
+ yearView: {
+ margin: '0 0 0 0',
+ },
+ year: {
+ padding: '0',
+ borderRadius: '0rem',
+ },
+ buttonbar: {
+ padding: '{overlay.popover.padding.100}',
+ borderColor: '{content.borderColor}',
+ },
+ timePicker: {
+ padding: '{form.padding.300}',
+ borderColor: '{content.borderColor}',
+ gap: '{form.gap.200}',
+ buttonGap: '{form.gap.100}',
+ },
+ root: {
+ transitionDuration: '{form.transitionDuration}',
+ },
+ },
+ dialog: {
+ extend: {
+ borderWidth: '{overlay.borderWidth}',
+ backdrop: '{overlay.modal.backdrop}',
+ },
+ root: {
+ background: '{overlay.modal.background}',
+ borderColor: '{overlay.modal.borderColor}',
+ color: '{overlay.modal.color}',
+ borderRadius: '{overlay.modal.borderRadius}',
+ shadow: '{overlay.popover.shadow}',
+ },
+ header: {
+ padding:
+ '{overlay.modal.padding.300} {overlay.modal.padding.300} 1rem {overlay.modal.padding.300}',
+ gap: '{overlay.gap.200}',
+ },
+ title: {
+ fontSize: '{fonts.fontSize.500}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ },
+ content: {
+ padding: '{content.padding.400}',
+ },
+ footer: {
+ padding:
+ '0 {overlay.modal.padding.md} {overlay.modal.padding.md} {overlay.modal.padding.md}',
+ gap: '{content.gap.200}',
+ },
+ },
+ divider: {
+ colorScheme: {
+ light: {
+ content: {
+ background: '{content.background}',
+ color: '{text.mutedColor}',
+ },
+ borderColor: '{content.borderColor}',
+ },
+ },
+ extend: {
+ content: {
+ gap: '{content.gap.200}',
+ },
+ iconSize: '{media.icon.size.100}',
+ },
+ horizontal: {
+ margin: '{content.padding.300} 0',
+ padding: '0 {content.padding.300}',
+ content: {
+ padding: '0 {content.padding.200}',
+ },
+ },
+ vertical: {
+ margin: '0 {content.padding.300}',
+ padding: '{content.padding.300} 0',
+ content: {
+ padding: '{content.padding.200} 0',
+ },
+ },
+ },
+ drawer: {
+ extend: {
+ borderRadius: '{overlay.popover.borderRadius}',
+ borderWidth: '{overlay.borderWidth}',
+ width: '{overlay.width}',
+ extHeader: {
+ gap: '{overlay.gap.200}',
+ borderColor: '{drawer.root.borderColor}',
+ },
+ padding: '{overlay.drawer.padding}',
+ scale: '0.125rem',
+ backdrop: '{overlay.modal.backdrop}',
+ },
+ root: {
+ background: '{overlay.modal.background}',
+ borderColor: '{overlay.modal.borderColor}',
+ color: '{overlay.modal.color}',
+ shadow: '{overlay.modal.shadow}',
+ },
+ header: {
+ padding:
+ '{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.100} {overlay.modal.padding.300} ',
+ },
+ title: {
+ fontSize: '{fonts.fontSize.500}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ },
+ content: {
+ padding: '{overlay.modal.padding.300}',
+ },
+ footer: {
+ padding:
+ '0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300} ',
+ },
+ },
+ fileupload: {
+ extend: {
+ extDragNdrop: {
+ background: '{surface.0}',
+ borderRadius: '{form.borderRadius.200}',
+ iconSize: '{form.size.500}',
+ padding: '{form.padding.400}',
+ info: {
+ gap: '{form.gap.100}',
+ },
+ },
+ extFile: {
+ iconSize: '{form.size.350}',
+ },
+ extContent: {
+ borderRadius: '{content.borderRadius}',
+ highlightBorderDefault: '{form.borderColor}',
+ },
+ },
+ colorScheme: {
+ light: {
+ header: {
+ background: '{surface.0}',
+ color: '{text.color}',
+ },
+ },
+ },
+ root: {
+ background: '{content.background}',
+ borderColor: '{content.borderColor}',
+ color: '{content.color}',
+ borderRadius: '{content.borderRadius}',
+ transitionDuration: '{form.transitionDuration}',
+ },
+ header: {
+ borderColor: '{content.borderColor}',
+ borderWidth: '0rem',
+ padding: '0rem',
+ borderRadius: '0rem',
+ gap: '{content.gap.200}',
+ },
+ content: {
+ highlightBorderColor: '{surface.900}',
+ padding: '0rem',
+ gap: '{content.gap.200}',
+ },
+ file: {
+ padding: '{content.padding.200}',
+ gap: '{content.gap.200}',
+ borderColor: '{form.borderColor}',
+ info: {
+ gap: '{content.gap.100}',
+ },
+ },
+ fileList: {
+ gap: '{content.gap.200}',
+ },
+ progressbar: {
+ height: '{feedback.height.100}',
+ },
+ basic: {
+ gap: '{content.gap.200}',
+ },
+ },
+ floatlabel: {
+ extend: {
+ height: '{form.size.800}',
+ iconSize: '{form.icon.400}',
+ },
+ root: {
+ color: '{form.floatLabelColor}',
+ focusColor: '{form.floatLabelFocusColor}',
+ activeColor: '{form.floatLabelActiveColor}',
+ invalidColor: '{form.floatLabelInvalidColor}',
+ transitionDuration: '{form.transitionDuration}',
+ positionX: '{form.padding.300}',
+ positionY: '{form.padding.300}',
+ fontWeight: '{fonts.fontWeight.regular}',
+ active: {
+ fontSize: '{fonts.fontSize.100}',
+ fontWeight: '{fonts.fontWeight.regular}',
+ },
+ },
+ over: {
+ active: {
+ top: '{form.padding.400}',
+ },
+ },
+ inside: {
+ input: {
+ paddingTop: '{form.padding.700}',
+ paddingBottom: '{form.padding.300}',
+ },
+ active: {
+ top: '{form.padding.300}',
+ },
+ },
+ on: {
+ borderRadius: '0rem',
+ active: {
+ padding: '0 {form.padding.100}',
+ background: '{form.background}',
+ },
+ },
+ },
+ galleria: {
+ extend: {
+ backdrop: '{overlay.modal.backdrop}',
+ },
+ colorScheme: {
+ light: {
+ thumbnailContent: {
+ background: '{surface.100}',
+ },
+ thumbnailNavButton: {
+ hoverBackground: '{colors.alpha.white.200}',
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ },
+ indicatorButton: {
+ background: '{surface.300}',
+ hoverBackground: '{surface.400}',
+ },
+ },
+ },
+ root: {
+ borderWidth: '{content.borderWidth}',
+ borderColor: '{content.borderColor}',
+ borderRadius: '{content.borderRadius}',
+ transitionDuration: '{media.transitionDuration}',
+ },
+ navButton: {
+ background: '{transparent}',
+ hoverBackground: '{colors.alpha.white.200}',
+ color: '{text.extend.colorInverted}',
+ hoverColor: '{text.extend.colorInverted}',
+ size: '{media.size.600}',
+ gutter: '{media.gap.200}',
+ prev: {
+ borderRadius: '{navigation.item.borderRadius}',
+ },
+ next: {
+ borderRadius: '{navigation.item.borderRadius}',
+ },
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ navIcon: {
+ size: '{media.icon.size.300}',
+ },
+ thumbnailsContent: {
+ padding: '{media.padding.100}',
+ },
+ thumbnailNavButton: {
+ size: '{media.size.300}',
+ borderRadius: '{content.borderRadius}',
+ gutter: '{media.gap.200}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ thumbnailNavButtonIcon: {
+ size: '{media.icon.size.100}',
+ },
+ caption: {
+ background: '{colors.alpha.white.500}',
+ color: '{text.color}',
+ padding: '{media.gap.200}',
+ },
+ indicatorList: {
+ gap: '{media.gap.200}',
+ padding: '{media.padding.400}',
+ },
+ indicatorButton: {
+ width: '{media.size.200}',
+ height: '{media.size.200}',
+ activeBackground: '{surface.900}',
+ borderRadius: '{content.borderRadius}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ insetIndicatorList: {
+ background: '{colors.alpha.black.500}',
+ },
+ insetIndicatorButton: {
+ background: '{colors.alpha.white.100}',
+ hoverBackground: '{colors.alpha.white.200}',
+ activeBackground: '{colors.alpha.white.500}',
+ },
+ closeButton: {
+ size: '{media.size.600}',
+ gutter: '{media.gap.200}',
+ background: '{colors.alpha.white.100}',
+ hoverBackground: '{colors.alpha.white.200}',
+ color: '{text.extend.colorInverted}',
+ hoverColor: '{text.extend.colorInverted}',
+ borderRadius: '{controls.borderRadius.200}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ closeButtonIcon: {
+ size: '{media.icon.size.300}',
+ },
+ },
+ inputgroup: {
+ extend: {
+ borderWidth: '{form.borderWidth}',
+ iconSize: '{form.icon.300}',
+ },
+ colorScheme: {
+ light: {
+ addon: {
+ background: '{form.background}',
+ borderColor: '{form.borderColor}',
+ color: '{text.mutedColor}',
+ },
+ },
+ },
+ addon: {
+ borderRadius: '{form.borderRadius.200}',
+ padding: '{form.padding.300}',
+ minWidth: '{form.width.300}',
+ },
+ },
+ inputnumber: {
+ extend: {
+ borderWidth: '{form.borderWidth}',
+ extButton: {
+ height: '{form.size.600}',
+ iconSize: '{form.icon.300}',
+ },
+ },
+ colorScheme: {
+ light: {
+ button: {
+ background: '{content.background}',
+ hoverBackground: '{content.hoverBackground}',
+ activeBackground: '{transparent}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.borderColor}',
+ activeBorderColor: '{form.borderColor}',
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ activeColor: '{text.color}',
+ },
+ },
+ },
+ transitionDuration: {
+ transitionDuration: '{form.transitionDuration}',
+ },
+ button: {
+ width: '{form.width.300}',
+ borderRadius: '{form.borderRadius.200}',
+ verticalPadding: '{form.padding.300}',
+ },
+ },
+ inputotp: {
+ extend: {
+ height: '{form.size.600}',
+ borderWidth: '{form.borderWidth}',
+ },
+ root: {
+ gap: '{form.gap.200}',
+ },
+ input: {
+ width: '{form.width.400}',
+ },
+ sm: {
+ width: '0rem',
+ },
+ lg: {
+ width: '0rem',
+ },
+ },
+ inputtext: {
+ extend: {
+ readonlyBackground: '{form.readonlyBackground}',
+ iconSize: '{form.icon.300}',
+ borderWidth: '{form.borderWidth}',
+ extXlg: {
+ fontSize: '{form.fontSize}',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ },
+ },
+ root: {
+ background: '{form.background}',
+ disabledBackground: '{form.disabledBackground}',
+ filledBackground: '{form.filledBackground}',
+ filledHoverBackground: '{form.filledHoverBackground}',
+ filledFocusBackground: '{form.filledFocusBackground}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.hoverBorderSecondaryColor}',
+ focusBorderColor: '{form.focusBorderSecondaryColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ color: '{text.color}',
+ disabledColor: '{form.disabledColor}',
+ placeholderColor: '{form.placeholderColor}',
+ invalidPlaceholderColor: '{form.invalidPlaceholderColor}',
+ shadow: '0',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ borderRadius: '{form.borderRadius.200}',
+ transitionDuration: '{form.transitionDuration}',
+ sm: {
+ fontSize: '{form.fontSize}',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ },
+ lg: {
+ fontSize: '{form.fontSize}',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ },
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '0',
+ },
+ },
+ },
+ listbox: {
+ extend: {
+ extOption: {
+ label: {
+ gap: '{list.gap.100}',
+ },
+ caption: {
+ color: '{text.mutedColor}',
+ stripedColor: '{text.mutedColor}',
+ },
+ gap: '{list.gap.200}',
+ },
+ },
+ colorScheme: {
+ light: {
+ option: {
+ stripedBackground: '{surface.50}',
+ },
+ },
+ },
+ root: {
+ background: '{form.background}',
+ disabledBackground: '{form.disabledBackground}',
+ borderColor: '{form.borderColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ color: '{form.color}',
+ disabledColor: '{form.disabledColor}',
+ shadow: '0',
+ borderRadius: '{form.borderRadius.200}',
+ transitionDuration: '{form.transitionDuration}',
+ },
+ list: {
+ padding: '{list.padding}',
+ gap: '{list.gap.100}',
+ header: {
+ padding: '{list.header.padding}',
+ },
+ },
+ option: {
+ focusBackground: '{list.option.focusBackground}',
+ selectedBackground: '{list.option.selectedBackground}',
+ selectedFocusBackground: '{list.option.selectedFocusBackground}',
+ color: '{list.option.color}',
+ focusColor: '{list.option.focusColor}',
+ selectedColor: '{list.option.selectedColor}',
+ selectedFocusColor: '{list.option.selectedFocusColor}',
+ padding: '{list.option.padding}',
+ borderRadius: '{list.option.borderRadius}',
+ },
+ optionGroup: {
+ background: '{list.optionGroup.background}',
+ color: '{list.optionGroup.color}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ padding: '{list.option.padding}',
+ },
+ checkmark: {
+ color: '{list.option.color}',
+ gutterStart: '-{list.gap.200}',
+ gutterEnd: '{list.gap.200}',
+ },
+ emptyMessage: {
+ padding: '{list.option.padding}',
+ },
+ },
+ megamenu: {
+ extend: {
+ extItem: {
+ caption: {
+ color: '{text.mutedColor}',
+ gap: '{content.gap.100}',
+ },
+ },
+ iconSize: '{navigation.submenuIcon.size}',
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: '{transparent}',
+ },
+ },
+ },
+ root: {
+ borderColor: '{transparent}',
+ borderRadius: '{content.borderRadius}',
+ color: '{content.color}',
+ gap: '{content.gap.100}',
+ transitionDuration: '{form.transitionDuration}',
+ verticalOrientation: {
+ padding: '{navigation.list.padding.100}',
+ gap: '{navigation.list.gap}',
+ },
+ horizontalOrientation: {
+ padding: '{navigation.list.padding.100}',
+ gap: '{navigation.list.gap}',
+ },
+ },
+ baseItem: {
+ borderRadius: '{content.borderRadius}',
+ padding: '{navigation.item.padding}',
+ },
+ item: {
+ focusBackground: '{navigation.item.focusBackground}',
+ activeBackground: '{navigation.item.activeBackground}',
+ color: '{navigation.item.color}',
+ focusColor: '{navigation.item.focusColor}',
+ activeColor: '{navigation.item.activeColor}',
+ padding: '{navigation.item.padding}',
+ borderRadius: '{navigation.item.borderRadius}',
+ gap: '{navigation.item.gap}',
+ icon: {
+ color: '{navigation.item.icon.color}',
+ focusColor: '{navigation.item.icon.focusColor}',
+ activeColor: '{navigation.item.icon.activeColor}',
+ },
+ },
+ overlay: {
+ padding: '{content.padding.100}',
+ background: '{content.background}',
+ borderColor: '{content.borderColor}',
+ borderRadius: '{content.borderRadius}',
+ color: '{content.color}',
+ shadow: '{navigation.shadow}',
+ gap: '0rem',
+ },
+ submenu: {
+ padding: '{navigation.list.padding.100}',
+ gap: '{navigation.list.gap}',
+ },
+ submenuLabel: {
+ padding: '{navigation.submenuLabel.padding}',
+ background: '{navigation.submenuLabel.background}',
+ color: '{navigation.submenuLabel.color}',
+ },
+ submenuIcon: {
+ size: '{navigation.submenuIcon.size}',
+ color: '{navigation.submenuIcon.color}',
+ focusColor: '{navigation.submenuIcon.focusColor}',
+ activeColor: '{navigation.submenuIcon.activeColor}',
+ },
+ separator: {
+ borderColor: '{content.borderColor}',
+ },
+ mobileButton: {
+ borderRadius: '{navigation.item.borderRadius}',
+ size: '{controls.iconOnly.600}',
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ hoverBackground: '{content.hoverBackground}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ menu: {
+ extend: {
+ paddingX: '0.25rem',
+ iconSize: '{navigation.submenuIcon.size}',
+ paddingY: '0.25rem',
+ extItem: {
+ caption: {
+ gap: '{content.gap.100}',
+ },
+ activeBackground: '{navigation.item.activeBackground}',
+ activeColor: '{navigation.item.activeColor}',
+ },
+ },
+ colorScheme: {
+ light: {
+ extend: {
+ extItem: {
+ caption: {
+ color: '{text.mutedColor}',
+ },
+ icon: {
+ activeColor: '{navigation.item.icon.activeColor}',
+ },
+ },
+ },
+ root: {
+ background: '{content.background}',
+ borderColor: '{content.borderColor}',
+ color: '{content.color}',
+ },
+ item: {
+ focusBackground: '{navigation.item.focusBackground}',
+ color: '{navigation.item.color}',
+ focusColor: '{navigation.item.focusColor}',
+ icon: {
+ color: '{navigation.item.icon.color}',
+ focusColor: '{navigation.item.icon.focusColor}',
+ },
+ },
+ },
+ },
+ root: {
+ borderRadius: '{content.borderRadius}',
+ shadow: '{navigation.shadow}',
+ transitionDuration: '{form.transitionDuration}',
+ },
+ list: {
+ padding: '{navigation.list.padding.100}',
+ gap: '{navigation.list.gap}',
+ },
+ submenuLabel: {
+ padding: '{navigation.submenuLabel.padding}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ background: '{navigation.submenuLabel.background}',
+ color: '{navigation.submenuLabel.color}',
+ },
+ separator: {
+ borderColor: '{content.borderColor}',
+ },
+ item: {
+ padding: '{navigation.item.padding}',
+ borderRadius: '{navigation.item.borderRadius}',
+ gap: '{navigation.item.gap}',
+ },
+ },
+ menubar: {
+ extend: {
+ iconSize: '{navigation.submenuIcon.size}',
+ extItem: {
+ caption: {
+ color: '{text.mutedColor}',
+ gap: '{content.padding.100}',
+ },
+ },
+ extSubmenuLabel: {
+ padding: '{navigation.submenuLabel.padding}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ background: '{navigation.submenuLabel.background}',
+ color: '{navigation.submenuLabel.color}',
+ },
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: '{transparent}',
+ },
+ },
+ },
+ root: {
+ borderColor: '{transparent}',
+ borderRadius: '{navigation.item.borderRadius}',
+ color: '{content.color}',
+ gap: '{content.padding.100}',
+ padding: '{navigation.list.padding.100}',
+ transitionDuration: '{form.transitionDuration}',
+ },
+ baseItem: {
+ borderRadius: '{navigation.item.borderRadius}',
+ padding: '{navigation.item.padding}',
+ },
+ item: {
+ focusBackground: '{navigation.item.focusBackground}',
+ activeBackground: '{navigation.item.activeBackground}',
+ color: '{navigation.item.color}',
+ focusColor: '{navigation.item.focusColor}',
+ activeColor: '{navigation.item.activeColor}',
+ padding: '{navigation.item.padding}',
+ borderRadius: '{navigation.item.borderRadius}',
+ gap: '{navigation.item.gap}',
+ icon: {
+ color: '{navigation.item.icon.color}',
+ focusColor: '{navigation.item.icon.focusColor}',
+ activeColor: '{navigation.item.icon.activeColor}',
+ },
+ },
+ submenu: {
+ padding: '{navigation.list.padding.100}',
+ gap: '{navigation.list.gap}',
+ background: '{content.background}',
+ borderColor: '{content.borderColor}',
+ borderRadius: '{content.borderRadius}',
+ shadow: '{navigation.shadow}',
+ mobileIndent: '{navigation.padding.200}',
+ icon: {
+ size: '{navigation.submenuIcon.size}',
+ color: '{navigation.submenuIcon.color}',
+ focusColor: '{navigation.submenuIcon.focusColor}',
+ activeColor: '{navigation.submenuIcon.activeColor}',
+ },
+ },
+ separator: {
+ borderColor: '{content.borderColor}',
+ },
+ mobileButton: {
+ borderRadius: '{navigation.item.borderRadius}',
+ size: '{controls.iconOnly.600}',
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ hoverBackground: '{content.hoverBackground}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ message: {
+ extend: {
+ width: '{messages.width}',
+ extText: {
+ gap: '{feedback.gap.100}',
+ },
+ extInfo: {
+ color: '{info.500}',
+ closeButton: {
+ color: '{info.500}',
+ borderColor: '{info.500}',
+ },
+ caption: {
+ color: '{text.color}',
+ },
+ },
+ extAccentLine: {
+ width: '{feedback.width.200}',
+ },
+ extCloseButton: {
+ width: '{feedback.width.100}',
+ },
+ extSuccess: {
+ color: '{success.500}',
+ closeButton: {
+ color: '{success.500}',
+ borderColor: '{success.500}',
+ },
+ caption: {
+ color: '{text.color}',
+ },
+ },
+ extWarn: {
+ color: '{warn.500}',
+ closeButton: {
+ color: '{warn.500}',
+ borderColor: '{warn.500}',
+ },
+ caption: {
+ color: '{text.color}',
+ },
+ },
+ extError: {
+ color: '{error.500}',
+ closeButton: {
+ color: '{error.500}',
+ borderColor: '{error.500}',
+ },
+ caption: {
+ color: '{text.color}',
+ },
+ },
+ },
+ colorScheme: {
+ light: {
+ success: {
+ background: '{success.50}',
+ borderColor: '{success.500}',
+ color: '{text.color}',
+ shadow: 'none',
+ outlined: {
+ color: '{text.color}',
+ borderColor: '{success.500}',
+ },
+ closeButton: {
+ hoverBackground: '{success.200}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ simple: {
+ color: '{text.color}',
+ },
+ },
+ outlined: {
+ root: {
+ borderWidth: '0rem',
+ },
+ closeButton: {
+ hoverBackground: '{transparent}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ outlined: {
+ color: '{transparent}',
+ borderColor: '{transparent}',
+ },
+ simple: {
+ color: '{transparent}',
+ },
+ },
+ simple: {
+ content: {
+ padding: '0rem',
+ },
+ },
+ warn: {
+ background: '{warn.50}',
+ borderColor: '{warn.500}',
+ color: '{text.color}',
+ shadow: 'none',
+ outlined: {
+ color: '{text.color}',
+ borderColor: '{warn.500}',
+ },
+ closeButton: {
+ hoverBackground: '{warn.200}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ simple: {
+ color: '{text.color}',
+ },
+ },
+ error: {
+ background: '{error.50}',
+ borderColor: '{error.500}',
+ color: '{text.color}',
+ shadow: 'none',
+ outlined: {
+ color: '{text.color}',
+ borderColor: '{error.500}',
+ },
+ closeButton: {
+ hoverBackground: '{error.200}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ simple: {
+ color: '{text.color}',
+ },
+ },
+ secondary: {
+ borderColor: '{transparent}',
+ shadow: 'none',
+ closeButton: {
+ hoverBackground: '{transparent}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ simple: {
+ color: '{transparent}',
+ },
+ outlined: {
+ color: '{transparent}',
+ borderColor: '{transparent}',
+ },
+ },
+ contrast: {
+ borderColor: '{transparent}',
+ shadow: 'none',
+ closeButton: {
+ hoverBackground: '{transparent}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ simple: {
+ color: '{transparent}',
+ },
+ outlined: {
+ color: '{transparent}',
+ borderColor: '{transparent}',
+ },
+ },
+ info: {
+ background: '{info.50}',
+ borderColor: '{info.500}',
+ color: '{text.color}',
+ shadow: 'none',
+ closeButton: {
+ hoverBackground: '{info.200}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ outlined: {
+ color: '{text.color}',
+ borderColor: '{info.500}',
+ },
+ simple: {
+ color: '{text.color}',
+ },
+ },
+ },
+ },
+ root: {
+ borderRadius: '{content.borderRadius}',
+ borderWidth: '{feedback.width.100}',
+ transitionDuration: '{feedback.transitionDuration}',
+ },
+ content: {
+ padding: '{feedback.padding.200}',
+ gap: '{feedback.gap.400}',
+ sm: {
+ padding: '{feedback.padding.200}',
+ },
+ lg: {
+ padding: '{feedback.padding.200}',
+ },
+ },
+ text: {
+ fontSize: '{fonts.fontSize.300}',
+ fontWeight: '{fonts.fontWeight.bold}',
+ sm: {
+ fontSize: '{fonts.fontSize.300}',
+ },
+ lg: {
+ fontSize: '{fonts.fontSize.300}',
+ },
+ },
+ icon: {
+ size: '{feedback.icon.size.500}',
+ sm: {
+ size: '{feedback.icon.size.500}',
+ },
+ lg: {
+ size: '{feedback.icon.size.500}',
+ },
+ },
+ closeButton: {
+ width: '{controls.iconOnly.600}',
+ height: '{controls.iconOnly.600}',
+ borderRadius: '{controls.borderRadius.100}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ offset: '{focusRing.offset}',
+ },
+ },
+ closeIcon: {
+ size: '{feedback.icon.size.200}',
+ sm: {
+ size: '{feedback.icon.size.200}',
+ },
+ lg: {
+ size: '{feedback.icon.size.200}',
+ },
+ },
+ },
+ metergroup: {
+ extend: {
+ extLabel: {
+ color: '{text.mutedColor}',
+ },
+ },
+ root: {
+ borderRadius: '{content.borderRadius}',
+ gap: '{feedback.gap.300}',
+ },
+ meters: {
+ size: '{feedback.height.100}',
+ background: '{content.borderColor}',
+ },
+ label: {
+ gap: '{feedback.gap.100}',
+ },
+ labelMarker: {
+ size: '{feedback.icon.size.100}',
+ },
+ labelIcon: {
+ size: '{feedback.icon.size.200}',
+ },
+ labelList: {
+ verticalGap: '{feedback.gap.200}',
+ horizontalGap: '{feedback.gap.300}',
+ },
+ },
+ multiselect: {
+ colorScheme: {
+ overlay: {
+ background: '{overlay.select.background}',
+ borderColor: '{overlay.select.borderColor}',
+ color: '{overlay.select.color}',
+ },
+ option: {
+ focusBackground: '{list.option.focusBackground}',
+ selectedBackground: '{list.option.selectedBackground}',
+ selectedFocusBackground: '{list.option.selectedFocusBackground}',
+ color: '{list.option.color}',
+ focusColor: '{list.option.focusColor}',
+ selectedColor: '{list.option.selectedColor}',
+ selectedFocusColor: '{list.option.selectedFocusColor}',
+ },
+ root: {
+ background: '{form.background}',
+ disabledBackground: '{form.disabledBackground}',
+ filledBackground: '{form.filledBackground}',
+ filledHoverBackground: '{form.filledHoverBackground}',
+ filledFocusBackground: '{form.filledFocusBackground}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.hoverBorderSecondaryColor}',
+ focusBorderColor: '{form.focusBorderSecondaryColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ color: '{form.color}',
+ disabledColor: '{form.disabledColor}',
+ placeholderColor: '{form.placeholderColor}',
+ invalidPlaceholderColor: '{form.invalidPlaceholderColor}',
+ focusRing: {
+ color: '{form.focusRing.color}',
+ },
+ },
+ dropdown: {
+ color: '{form.floatLabelColor}',
+ },
+ optionGroup: {
+ background: '{list.optionGroup.background}',
+ color: '{list.optionGroup.color}',
+ },
+ clearIcon: {
+ color: '{form.floatLabelColor}',
+ },
+ },
+ extend: {
+ paddingX: '0.3571rem',
+ paddingY: '0.3571rem',
+ borderWidth: '{form.borderWidth}',
+ iconSize: '{form.icon.300}',
+ width: '{form.width}',
+ readonlyBackground: '{form.readonlyBackground}',
+ },
+ root: {
+ shadow: '0',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ borderRadius: '{form.borderRadius.200}',
+ transitionDuration: '{form.transitionDuration}',
+ sm: {
+ fontSize: '{fonts.fontSize.300}',
+ paddingX: '{form.padding.200}',
+ paddingY: '{form.padding.200}',
+ },
+ lg: {
+ fontSize: '{fonts.fontSize.300}',
+ paddingX: '{form.padding.400}',
+ paddingY: '{form.padding.400}',
+ },
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ offset: '{form.focusRing.offset}',
+ shadow: '0',
+ },
+ },
+ dropdown: {
+ width: '{form.width.300}',
+ },
+ overlay: {
+ borderRadius: '{overlay.select.borderRadius}',
+ shadow: '{overlay.select.shadow}',
+ },
+ list: {
+ padding: '{list.padding}',
+ header: {
+ padding: '{list.header.padding}',
+ },
+ gap: '{list.gap.100}',
+ },
+ chip: {
+ borderRadius: '{form.borderRadius.100}',
+ },
+ option: {
+ padding: '{list.option.padding}',
+ borderRadius: '{list.option.borderRadius}',
+ gap: '{list.gap.200}',
+ },
+ optionGroup: {
+ fontWeight: '{fonts.fontWeight.demibold}',
+ padding: '{list.optionGroup.padding}',
+ },
+ emptyMessage: {
+ padding: '{list.option.padding}',
+ },
+ },
+ paginator: {
+ root: {
+ padding: '0 {data.padding.200}',
+ gap: '{data.gap.200}',
+ borderRadius: '{content.borderRadius}',
+ background: '{transparent}',
+ color: '{content.color}',
+ transitionDuration: '{data.transitionDuration}',
+ },
+ currentPageReport: {
+ color: '{text.mutedColor}',
+ },
+ navButton: {
+ background: '{transparent}',
+ hoverBackground: '{content.hoverBackground}',
+ selectedBackground: '{highlight.background}',
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ selectedColor: '{text.extend.colorInverted}',
+ width: '{data.icon.size.700}',
+ height: '{data.icon.size.700}',
+ borderRadius: '{content.borderRadius}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ focus: '{focusRing.shadow}',
+ },
+ },
+ jumpToPageInput: {
+ maxWidth: '{data.width.400}',
+ },
+ },
+ panelmenu: {
+ extend: {
+ extPanel: {
+ gap: '{content.gap.100}',
+ },
+ iconSize: '{navigation.submenuIcon.size}',
+ extItem: {
+ activeBackground: '{navigation.item.activeBackground}',
+ activeColor: '{navigation.item.activeColor}',
+ caption: {
+ color: '{text.mutedColor}',
+ gap: '{content.gap.100}',
+ },
+ },
+ },
+ root: {
+ gap: '{content.gap.100}',
+ transitionDuration: '{form.transitionDuration}',
+ },
+ panel: {
+ background: '{transparent}',
+ borderColor: '{transparent}',
+ borderWidth: '{navigation.width.100}',
+ color: '{content.color}',
+ padding: '{content.padding.100}',
+ borderRadius: '{content.borderRadius}',
+ first: {
+ borderWidth:
+ '{navigation.width.100} {navigation.width.100} 0 {navigation.width.100}',
+ topBorderRadius: '{content.borderRadius}',
+ },
+ last: {
+ borderWidth:
+ '0 {navigation.width.100} {navigation.width.100} {navigation.width.100}',
+ topBorderRadius: '{content.borderRadius}',
+ },
+ },
+ item: {
+ focusBackground: '{navigation.item.focusBackground}',
+ color: '{navigation.item.color}',
+ focusColor: '{navigation.item.focusColor}',
+ gap: '{navigation.item.gap}',
+ padding: '{navigation.item.padding}',
+ borderRadius: '{navigation.item.borderRadius}',
+ icon: {
+ color: '{navigation.item.icon.color}',
+ focusColor: '{navigation.item.icon.focusColor}',
+ },
+ },
+ submenu: {
+ indent: '{navigation.padding.400}',
+ },
+ separator: {
+ borderColor: '{content.borderColor}',
+ },
+ submenuIcon: {
+ color: '{navigation.submenuIcon.color}',
+ focusColor: '{navigation.submenuIcon.focusColor}',
+ },
+ },
+ password: {
+ extend: {
+ borderWidth: '{form.borderWidth}',
+ },
+ colorScheme: {
+ light: {
+ strength: {
+ weakBackground: '{error.500}',
+ mediumBackground: '{warn.500}',
+ strongBackground: '{success.600}',
+ },
+ icon: {
+ color: '{form.placeholderColor}',
+ },
+ },
+ },
+ meter: {
+ background: '{content.borderColor}',
+ borderRadius: '{content.borderRadius}',
+ height: '{feedback.height.100}',
+ },
+ overlay: {
+ background: '{overlay.popover.background}',
+ borderColor: '{overlay.popover.borderColor}',
+ borderRadius: '{overlay.popover.borderRadius}',
+ color: '{overlay.popover.color}',
+ padding: '{overlay.popover.padding.100}',
+ shadow: '{overlay.popover.shadow}',
+ },
+ content: {
+ gap: '{content.gap.200}',
+ },
+ },
+ popover: {
+ extend: {
+ borderWidth: '{overlay.borderWidth}',
+ arrow: {
+ width: '{overlay.popover.width.200}',
+ height: '{overlay.popover.width.100}',
+ },
+ },
+ root: {
+ background: '{overlay.popover.background}',
+ borderColor: '{overlay.popover.borderColor}',
+ color: '{overlay.popover.color}',
+ borderRadius: '{overlay.popover.borderRadius}',
+ shadow: '{overlay.popover.shadow}',
+ gutter: '{overlay.gap.100}',
+ arrowOffset: '{overlay.popover.padding.200}',
+ },
+ content: {
+ padding: '{overlay.popover.padding.100}',
+ },
+ },
+ progressbar: {
+ label: {
+ color: '{text.extend.colorPrimaryStatic}',
+ fontSize: '{fonts.fontSize.100}',
+ fontWeight: '{fonts.fontWeight.regular}',
+ },
+ root: {
+ background: '{content.borderColor}',
+ borderRadius: '{content.borderRadius}',
+ height: '{feedback.height.300}',
+ },
+ value: {
+ background: '{primary.color}',
+ },
+ },
+ progressspinner: {
+ extend: {
+ small: '{feedback.width.500}',
+ medium: '{feedback.width.700}',
+ large: '{feedback.width.800}',
+ xlarge: '{feedback.width.900}',
+ },
+ colorScheme: {
+ light: {
+ root: {
+ colorOne: '{success.500}',
+ colorTwo: '{info.500}',
+ colorThree: '{error.500}',
+ colorFour: '{warn.500}',
+ },
+ },
+ },
+ root: {
+ borderWidth: '{feedback.width.200}',
+ },
+ },
+ radiobutton: {
+ root: {
+ width: '{form.size.400}',
+ height: '{form.size.400}',
+ background: '{form.background}',
+ checkedBackground: '{surface.900}',
+ checkedHoverBackground: '{surface.800}',
+ disabledBackground: '{form.disabledBackground}',
+ filledBackground: '{form.filledBackground}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.hoverBorderPrimaryColor}',
+ focusBorderColor: '{form.borderColor}',
+ checkedBorderColor: '{surface.900}',
+ checkedHoverBorderColor: '{form.hoverBorderPrimaryColor}',
+ checkedFocusBorderColor: '{form.focusBorderPrimaryColor}',
+ checkedDisabledBorderColor: '{form.borderColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ shadow: '0',
+ transitionDuration: '{form.transitionDuration}',
+ },
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ sm: {
+ width: '{form.size.300}',
+ height: '{form.size.300}',
+ },
+ lg: {
+ width: '{form.size.350}',
+ height: '{form.size.350}',
+ },
+ icon: {
+ size: '{form.icon.200}',
+ checkedColor: '{text.extend.colorInverted}',
+ checkedHoverColor: '{text.extend.colorInverted}',
+ disabledColor: '{text.mutedColor}',
+ sm: {
+ size: '{form.icon.100}',
+ },
+ lg: {
+ size: '{form.icon.300}',
+ },
+ },
+ },
+ rating: {
+ root: {
+ gap: '{form.gap.200}',
+ transitionDuration: '{form.transitionDuration}',
+ },
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ icon: {
+ size: '{form.icon.500}',
+ color: '{surface.500}',
+ hoverColor: '{warn.500}',
+ activeColor: '{warn.500}',
+ },
+ },
+ ripple: {
+ colorScheme: {
+ light: {
+ root: {
+ background: 'rgba(255, 255, 255, 0.0100)',
+ },
+ },
+ },
+ },
+ scrollpanel: {
+ colorScheme: {
+ light: {
+ bar: {
+ background: '{surface.300}',
+ },
+ },
+ },
+ root: {
+ transitionDuration: '{media.transitionDuration}',
+ },
+ bar: {
+ size: '{media.size.200}',
+ borderRadius: '{media.borderRadius.100}',
+ focusRing: {
+ width: '0rem',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ select: {
+ extend: {
+ extOption: {
+ background: '{list.option.background}',
+ gap: '{list.gap.200}',
+ },
+ extOptionGroup: {
+ gap: '{list.gap.200}',
+ },
+ readonlyBackground: '{form.readonlyBackground}',
+ borderWidth: '{form.borderWidth}',
+ iconSize: '{form.icon.300}',
+ },
+ root: {
+ background: '{form.background}',
+ disabledBackground: '{form.disabledBackground}',
+ filledBackground: '{form.filledBackground}',
+ filledHoverBackground: '{form.filledHoverBackground}',
+ filledFocusBackground: '{form.filledFocusBackground}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.hoverBorderSecondaryColor}',
+ focusBorderColor: '{form.focusBorderSecondaryColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ color: '{text.color}',
+ disabledColor: '{form.disabledColor}',
+ placeholderColor: '{form.placeholderColor}',
+ invalidPlaceholderColor: '{form.invalidPlaceholderColor}',
+ shadow: '0',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ borderRadius: '{form.borderRadius.200}',
+ transitionDuration: '{form.transitionDuration}',
+ sm: {
+ fontSize: '{form.fontSize}',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ },
+ lg: {
+ fontSize: '{form.fontSize}',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ },
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '0',
+ },
+ },
+ dropdown: {
+ width: '{form.width.300}',
+ color: '{form.iconColor}',
+ },
+ overlay: {
+ background: '{overlay.select.background}',
+ borderColor: '{overlay.select.borderColor}',
+ borderRadius: '{overlay.select.borderRadius}',
+ color: '{overlay.select.color}',
+ shadow: '{overlay.select.shadow}',
+ },
+ list: {
+ padding: '{list.padding}',
+ gap: '{list.gap.100}',
+ header: {
+ padding: '{list.header.padding}',
+ },
+ },
+ option: {
+ focusBackground: '{list.option.focusBackground}',
+ selectedBackground: '{list.option.selectedBackground}',
+ selectedFocusBackground: '{list.option.selectedFocusBackground}',
+ color: '{list.option.color}',
+ focusColor: '{list.option.focusColor}',
+ selectedColor: '{list.option.selectedColor}',
+ selectedFocusColor: '{list.option.selectedFocusColor}',
+ padding: '{list.option.padding}',
+ borderRadius: '{list.option.borderRadius}',
+ },
+ optionGroup: {
+ background: '{list.optionGroup.background}',
+ color: '{list.optionGroup.color}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ padding: '{list.option.padding}',
+ },
+ clearIcon: {
+ color: '{form.iconColor}',
+ },
+ checkmark: {
+ color: '{list.option.color}',
+ gutterStart: '-{form.padding.200}',
+ gutterEnd: '{form.padding.200}',
+ },
+ emptyMessage: {
+ padding: '{list.option.padding}',
+ },
+ },
+ selectbutton: {
+ extend: {
+ gap: '{form.gap.100}',
+ paddingX: '{controls.padding.100}',
+ paddingY: '{controls.padding.100}',
+ checkedBackground: '{form.background}',
+ iconSize: {
+ sm: '{controls.iconOnly.200}',
+ md: '{controls.iconOnly.300}',
+ lg: '{controls.iconOnly.400}',
+ xlg: '{controls.iconOnly.500}',
+ },
+ checkedBorderColor: '{form.background}',
+ checkedColor: '{form.color}',
+ ext: {
+ borderRadius: '{borderRadius.200}',
+ },
+ },
+ colorScheme: {
+ light: {
+ root: {
+ invalidBorderColor: '{form.invalidBorderColor}',
+ },
+ extend: {
+ background: '{surface.200}',
+ },
+ },
+ },
+ root: {
+ borderRadius: '{form.borderRadius.200}',
+ },
+ },
+ skeleton: {
+ extend: {
+ minWidth: '{feedback.width.700}',
+ height: '{feedback.height.650}',
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: '{surface.200}',
+ animationBackground: '{surface.100}',
+ },
+ },
+ },
+ root: {
+ borderRadius: '{content.borderRadius}',
+ },
+ },
+ slider: {
+ colorScheme: {
+ handle: {
+ content: {
+ background: '{surface.0}',
+ },
+ },
+ },
+ root: {
+ transitionDuration: '{form.transitionDuration}',
+ },
+ track: {
+ background: '{content.borderColor}',
+ borderRadius: '{content.borderRadius}',
+ size: '{form.size.150}',
+ },
+ range: {
+ background: '{surface.900}',
+ },
+ handle: {
+ width: '{form.size.350}',
+ height: '{form.size.350}',
+ borderRadius: '{form.borderRadius.300}',
+ background: '{surface.900}',
+ hoverBackground: '{surface.900}',
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ content: {
+ borderRadius: '{form.borderRadius.300}',
+ hoverBackground: '{surface.900}',
+ width: '{form.size.250}',
+ height: '{form.size.250}',
+ shadow: 'none',
+ },
+ },
+ },
+ splitter: {
+ colorScheme: {
+ light: {
+ handle: {
+ background: '{surface.900}',
+ },
+ },
+ },
+ gutter: {
+ background: '{surface.100}',
+ },
+ root: {
+ background: '{content.background}',
+ borderColor: '{content.borderColor}',
+ color: '{content.color}',
+ transitionDuration: '{controls.transitionDuration}',
+ },
+ handle: {
+ size: '{form.size.150}',
+ borderRadius: '{content.borderRadius}',
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ stepper: {
+ extend: {
+ extCaption: {
+ gap: '{feedback.gap.100}',
+ },
+ extStepNumber: {
+ invalidBackground: '{error.400}',
+ invalidColor: '{error.900}',
+ invalidBorderColor: '{error.400}',
+ borderWidth: '{feedback.width.100}',
+ iconSize: '{feedback.icon.size.300}',
+ },
+ },
+ root: {
+ transitionDuration: '{feedback.transitionDuration}',
+ },
+ separator: {
+ background: '{content.borderColor}',
+ activeBackground: '{form.focusBorderPrimaryColor}',
+ margin: '0 0 0 1.625rem',
+ size: '{form.size.100}',
+ },
+ step: {
+ padding: '{feedback.padding.100}',
+ gap: '{feedback.gap.200}',
+ },
+ stepHeader: {
+ padding: '0rem',
+ borderRadius: '0rem',
+ gap: '{feedback.gap.200}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ stepTitle: {
+ color: '{text.color}',
+ activeColor: '{text.color}',
+ fontWeight: '{fonts.fontWeight.regular}',
+ },
+ stepNumber: {
+ background: '{content.background}',
+ activeBackground: '{primary.color}',
+ borderColor: '{content.borderColor}',
+ activeBorderColor: '{primary.color}',
+ color: '{text.color}',
+ activeColor: '{text.extend.colorPrimaryStatic}',
+ size: '{form.size.400}',
+ fontSize: '{fonts.fontSize.300}',
+ fontWeight: '{fonts.fontWeight.bold}',
+ borderRadius: '{form.borderRadius.300}',
+ shadow: 'none',
+ },
+ steppanels: {
+ padding: '{feedback.padding.200}',
+ },
+ steppanel: {
+ background: '{content.background}',
+ color: '{content.color}',
+ padding: '0rem',
+ indent: '0rem',
+ },
+ },
+ steps: {
+ itemLink: {
+ gap: '{form.gap.200}',
+ },
+ itemLabel: {
+ fontWeight: '{fonts.fontWeight.regular}',
+ },
+ itemNumber: {
+ background: '{content.background}',
+ size: '{form.size.500}',
+ fontSize: '{fonts.fontSize.300}',
+ fontWeight: '{fonts.fontWeight.bold}',
+ borderRadius: '{form.borderRadius.300}',
+ shadow: 'none',
+ },
+ },
+ tabs: {
+ colorScheme: {
+ light: {
+ navButton: {
+ shadow: 'none',
+ },
+ tab: {
+ background: '{transparent}',
+ hoverBackground: '{transparent}',
+ activeBackground: '{transparent}',
+ },
+ },
+ },
+ root: {
+ transitionDuration: '{data.transitionDuration}',
+ },
+ tablist: {
+ borderWidth: '0 0 {data.width.100} 0',
+ background: '{transparent}',
+ borderColor: '{content.borderColor}',
+ },
+ tab: {
+ borderWidth: '0',
+ borderColor: '{content.borderColor}',
+ hoverBorderColor: '{content.borderColor}',
+ activeBorderColor: '{content.activeBorderColor}',
+ color: '{text.mutedColor}',
+ hoverColor: '{text.color}',
+ activeColor: '{text.color}',
+ padding: '{content.padding.300}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ margin: '0',
+ gap: '{content.gap.200}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ tabpanel: {
+ background: '{transparent}',
+ color: '{text.color}',
+ padding: '{spacing.4x}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ navButton: {
+ background: '{content.background}',
+ color: '{content.color}',
+ hoverColor: '{content.hoverColor}',
+ width: '{controls.iconOnly.400}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ activeBar: {
+ height: '0.18rem',
+ bottom: '-0.18rem',
+ background: '{content.color}',
+ },
+ },
+ toast: {
+ extend: {
+ extInfo: {
+ color: '{info.500}',
+ closeButton: {
+ color: '{info.500}',
+ borderColor: '{info.500}',
+ },
+ caption: {
+ color: '{text.color}',
+ },
+ },
+ extAccentLine: {
+ width: '{feedback.width.200}',
+ },
+ extCloseButton: {
+ width: '{feedback.width.100}',
+ },
+ extSuccess: {
+ color: '{success.500}',
+ closeButton: {
+ color: '{success.500}',
+ borderColor: '{success.500}',
+ },
+ caption: {
+ color: '{text.color}',
+ },
+ },
+ extWarn: {
+ color: '{warn.500}',
+ closeButton: {
+ color: '{warn.500}',
+ borderColor: '{warn.500}',
+ },
+ caption: {
+ color: '{text.color}',
+ },
+ },
+ extError: {
+ color: '{error.500}',
+ closeButton: {
+ color: '{error.500}',
+ borderColor: '{error.500}',
+ },
+ caption: {
+ color: '{text.color}',
+ },
+ },
+ },
+ colorScheme: {
+ light: {
+ info: {
+ background: '{info.50}',
+ borderColor: '{info.500}',
+ color: '{text.color}',
+ detailColor: '{text.color}',
+ shadow: '{overlay.popover.shadow}',
+ closeButton: {
+ hoverBackground: '{info.200}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ success: {
+ background: '{success.50}',
+ borderColor: '{success.500}',
+ color: '{text.color}',
+ detailColor: '{text.color}',
+ shadow: '{overlay.popover.shadow}',
+ closeButton: {
+ hoverBackground: '{success.200}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ warn: {
+ background: '{warn.50}',
+ borderColor: '{warn.500}',
+ color: '{text.color}',
+ detailColor: '{text.color}',
+ shadow: '{overlay.popover.shadow}',
+ closeButton: {
+ hoverBackground: '{warn.200}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: 'none',
+ },
+ },
+ },
+ error: {
+ background: '{error.50}',
+ borderColor: '{error.500}',
+ color: '{text.color}',
+ detailColor: '{text.color}',
+ shadow: '{overlay.popover.shadow}',
+ closeButton: {
+ hoverBackground: '{error.200}',
+ focusRing: {
+ color: '{focusRing.color}',
+ shadow: '{focusRing.shadow}',
+ },
+ },
+ },
+ secondary: {
+ shadow: '{overlay.popover.shadow}',
+ },
+ contrast: {
+ shadow: '{overlay.popover.shadow}',
+ },
+ },
+ },
+ root: {
+ width: '{messages.width}',
+ borderWidth: '{feedback.width.100}',
+ borderRadius: '{content.borderRadius}',
+ transitionDuration: '{feedback.transitionDuration}',
+ },
+ icon: {
+ size: '{feedback.icon.size.500}',
+ },
+ content: {
+ padding: '{feedback.padding.200}',
+ gap: '{feedback.gap.400}',
+ },
+ text: {
+ gap: '{feedback.gap.100}',
+ },
+ summary: {
+ fontWeight: '{fonts.fontWeight.bold}',
+ fontSize: '{fonts.fontSize.300}',
+ },
+ detail: {
+ fontWeight: '{fonts.fontWeight.regular}',
+ fontSize: '{fonts.fontSize.200}',
+ },
+ closeButton: {
+ width: '{feedback.icon.size.400}',
+ height: '{feedback.icon.size.400}',
+ borderRadius: '{controls.borderRadius.100}',
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ offset: '{focusRing.offset}',
+ },
+ },
+ closeIcon: {
+ size: '{feedback.icon.size.200}',
+ },
+ },
+ tag: {
+ colorScheme: {
+ light: {
+ primary: {
+ background: '{primary.selectedBackground}',
+ color: '{text.color}',
+ },
+ secondary: {
+ background: '{surface.200}',
+ color: '{text.color}',
+ },
+ success: {
+ background: '{success.400}',
+ color: '{success.900}',
+ },
+ info: {
+ background: '{info.300}',
+ color: '{info.900}',
+ },
+ warn: {
+ background: '{warn.300}',
+ color: '{warn.900}',
+ },
+ danger: {
+ background: '{error.300}',
+ color: '{error.900}',
+ },
+ },
+ },
+ root: {
+ fontSize: '{fonts.fontSize.100}',
+ fontWeight: '{fonts.fontWeight.regular}',
+ padding: '{media.padding.100} {media.padding.200}',
+ gap: '{media.gap.100}',
+ borderRadius: '{media.size.200}',
+ roundedBorderRadius: '{media.borderRadius.400}',
+ },
+ icon: {
+ size: '{media.icon.size.100}',
+ },
+ },
+ textarea: {
+ extend: {
+ readonlyBackground: '{form.readonlyBackground}',
+ borderWidth: '{form.borderWidth}',
+ iconSize: '{form.icon.300}',
+ minHeight: '{form.size.900}',
+ },
+ root: {
+ background: '{form.background}',
+ disabledBackground: '{form.disabledBackground}',
+ filledBackground: '{form.filledBackground}',
+ filledHoverBackground: '{form.filledHoverBackground}',
+ filledFocusBackground: '{form.filledFocusBackground}',
+ borderColor: '{form.borderColor}',
+ hoverBorderColor: '{form.hoverBorderSecondaryColor}',
+ focusBorderColor: '{form.focusBorderSecondaryColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ color: '{form.color}',
+ disabledColor: '{form.disabledColor}',
+ placeholderColor: '{form.placeholderColor}',
+ invalidPlaceholderColor: '{form.invalidPlaceholderColor}',
+ shadow: '0',
+ paddingX: '{form.paddingX}',
+ paddingY: '{form.paddingY}',
+ borderRadius: '{form.borderRadius.200}',
+ transitionDuration: '{form.transitionDuration}',
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '0',
+ },
+ },
+ sm: {
+ fontSize: '{fonts.fontSize.300}',
+ paddingX: '{form.padding.200}',
+ paddingY: '{form.padding.200}',
+ },
+ lg: {
+ fontSize: '{fonts.fontSize.300}',
+ paddingX: '{form.padding.400}',
+ paddingY: '{form.padding.400}',
+ },
+ },
+ tieredmenu: {
+ extend: {
+ extSubmenu: {
+ borderColor: '{content.borderColor}',
+ background: '{content.background}',
+ },
+ iconSize: '{navigation.submenuIcon.size}',
+ extItem: {
+ caption: {
+ gap: '{content.gap.100}',
+ color: '{text.mutedColor}',
+ },
+ },
+ },
+ root: {
+ background: '{content.background}',
+ borderColor: '{transparent}',
+ color: '{content.color}',
+ borderRadius: '{content.borderRadius}',
+ shadow: '{navigation.shadow}',
+ transitionDuration: '{feedback.transitionDuration}',
+ },
+ list: {
+ padding: '{navigation.list.padding.100}',
+ gap: '{navigation.list.gap}',
+ },
+ item: {
+ focusBackground: '{navigation.item.focusBackground}',
+ activeBackground: '{navigation.item.activeBackground}',
+ color: '{navigation.item.color}',
+ focusColor: '{navigation.item.focusColor}',
+ activeColor: '{navigation.item.activeColor}',
+ padding: '{navigation.item.padding}',
+ borderRadius: '{navigation.item.borderRadius}',
+ gap: '{navigation.item.gap}',
+ icon: {
+ color: '{navigation.item.icon.color}',
+ focusColor: '{navigation.item.icon.focusColor}',
+ activeColor: '{navigation.item.icon.activeColor}',
+ },
+ },
+ submenu: {
+ mobileIndent: '{overlay.popover.padding.100}',
+ },
+ separator: {
+ borderColor: '{content.borderColor}',
+ },
+ },
+ timeline: {
+ extend: {
+ extEvent: {
+ gap: '{feedback.gap.100}',
+ },
+ },
+ event: {
+ minHeight: '{feedback.height.900}',
+ },
+ vertical: {
+ eventContent: {
+ padding: '0 {feedback.padding.500}',
+ },
+ },
+ horizontal: {
+ eventContent: {
+ padding: '{feedback.padding.500} 0',
+ },
+ },
+ eventMarker: {
+ size: '{feedback.width.500}',
+ borderRadius: '{content.borderRadius}',
+ borderWidth: '{feedback.width.200}',
+ background: '{content.background}',
+ borderColor: '{primary.color}',
+ content: {
+ borderRadius: '{content.borderRadius}',
+ size: '{feedback.width.400}',
+ background: '{transparent}',
+ insetShadow: 'none',
+ },
+ },
+ eventConnector: {
+ color: '{content.borderColor}',
+ size: '{feedback.width.100}',
+ },
+ },
+ togglebutton: {
+ extend: {
+ ext: {
+ gap: '{form.gap.300}',
+ },
+ iconSize: {
+ sm: '{controls.iconOnly.200}',
+ md: '{controls.iconOnly.300}',
+ lg: '{controls.iconOnly.400}',
+ },
+ iconOnlyWidth: '{form.size.600}',
+ hoverBorderColor: '{surface.300}',
+ checkedHoverColor: '{text.extend.colorInverted}',
+ checkedHoverBackground: '{surface.800}',
+ checkedHoverBorderColor: '{surface.800}',
+ extXlg: {
+ padding: '{form.padding.500} {form.padding.500}',
+ iconOnlyWidth: '4.0714rem',
+ },
+ extSm: {
+ iconOnlyWidth: '2.1429rem',
+ },
+ extLg: {
+ iconOnlyWidth: '3.5714rem',
+ },
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: '{surface.200}',
+ hoverBackground: '{surface.300}',
+ borderColor: '{surface.200}',
+ color: '{text.color}',
+ hoverColor: '{text.color}',
+ checkedBackground: '{surface.900}',
+ checkedColor: '{text.extend.colorInverted}',
+ checkedBorderColor: '{surface.900}',
+ disabledBackground: '{form.disabledBackground}',
+ disabledBorderColor: '{form.disabledBackground}',
+ disabledColor: '{form.disabledColor}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ },
+ icon: {
+ color: '{text.color}',
+ hoverColor: '{text.color}',
+ checkedColor: '{text.extend.colorInverted}',
+ disabledColor: '{form.disabledColor}',
+ },
+ content: {
+ checkedBackground: '{transparent}',
+ },
+ },
+ },
+ root: {
+ padding: '{form.padding.200} {form.padding.400}',
+ borderRadius: '{form.borderRadius.300}',
+ gap: '{form.gap.200}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '{focusRing.shadow}',
+ },
+ sm: {
+ fontSize: '{fonts.fontSize.200}',
+ padding: '{form.padding.100} {form.padding.300}',
+ },
+ lg: {
+ fontSize: '{fonts.fontSize.500}',
+ padding: '{form.padding.400} {form.padding.600}',
+ },
+ transitionDuration: '{form.transitionDuration}',
+ },
+ content: {
+ checkedShadow: 'none',
+ padding: '0rem',
+ borderRadius: '0rem',
+ sm: {
+ padding: '0rem',
+ },
+ lg: {
+ padding: '0rem',
+ },
+ },
+ },
+ toggleswitch: {
+ colorScheme: {
+ light: {
+ root: {
+ background: '{surface.400}',
+ hoverBackground: '{surface.500}',
+ disabledBackground: '{form.disabledBackground}',
+ checkedBackground: '{surface.900}',
+ checkedHoverBackground: '{surface.800}',
+ },
+ handle: {
+ background: '{form.backgroundHandler}',
+ hoverBackground: '{form.backgroundHandler}',
+ disabledBackground: '{form.disabledColor}',
+ checkedBackground: '{surface.0}',
+ checkedHoverBackground: '{surface.0}',
+ color: '{text.color}',
+ hoverColor: '{text.color}',
+ checkedColor: '{text.color}',
+ checkedHoverColor: '{text.color}',
+ },
+ },
+ },
+ root: {
+ width: '{form.size.600}',
+ height: '{form.size.400}',
+ borderRadius: '{form.borderRadius.300}',
+ gap: '{form.gap.100}',
+ borderWidth: '{form.borderWidth}',
+ shadow: 'none',
+ focusRing: {
+ width: '{form.focusRing.width}',
+ style: '{form.focusRing.style}',
+ color: '{form.focusRing.color}',
+ offset: '{form.focusRing.offset}',
+ shadow: '0',
+ },
+ borderColor: '{transparent}',
+ hoverBorderColor: '{transparent}',
+ checkedBorderColor: '{transparent}',
+ checkedHoverBorderColor: '{transparent}',
+ invalidBorderColor: '{form.invalidBorderColor}',
+ transitionDuration: '{form.transitionDuration}',
+ slideDuration: '{form.transitionDuration}',
+ },
+ handle: {
+ borderRadius: '{form.borderRadius.300}',
+ size: '{form.size.300}',
+ },
+ },
+ tooltip: {
+ colorScheme: {
+ light: {
+ root: {
+ background: '{surface.900}',
+ color: '{text.extend.colorInverted}',
+ },
+ },
+ },
+ root: {
+ maxWidth: '{overlay.width}',
+ gutter: '{feedback.gap.100}',
+ shadow: '{overlay.popover.shadow}',
+ padding: '{feedback.padding.100} {feedback.padding.200} ',
+ borderRadius: '{overlay.popover.borderRadius}',
+ },
+ },
+ tree: {
+ root: {
+ background: '{content.background}',
+ color: '{content.color}',
+ padding: '{data.padding.400}',
+ gap: '{data.gap.100}',
+ indent: '{data.padding.400}',
+ },
+ node: {
+ padding: '{data.padding.200} {data.padding.300}',
+ color: '{text.color}',
+ selectedColor: '{text.extend.colorInverted}',
+ gap: '{data.gap.100}',
+ },
+ nodeIcon: {
+ selectedColor: '{text.extend.colorInverted}',
+ },
+ nodeToggleButton: {
+ borderRadius: '{data.borderRadius}',
+ size: '{data.icon.size.400}',
+ selectedHoverBackground: '{surface.900}',
+ },
+ loadingIcon: {
+ size: '{data.icon.size.100}',
+ },
+ filter: {
+ margin: '0 0 {data.padding.200} 0',
+ },
+ },
+ overlaybadge: {
+ root: {
+ outline: {
+ width: '0rem',
+ color: '{transparent}',
+ },
+ },
+ },
+};
diff --git a/src/prime-preset/tokens/components/button.json b/src/prime-preset/tokens/components/button.json
deleted file mode 100644
index 347c037..0000000
--- a/src/prime-preset/tokens/components/button.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "button": {
- "css": ""
- }
-}
diff --git a/src/prime-preset/tokens/components/button.ts b/src/prime-preset/tokens/components/button.ts
new file mode 100644
index 0000000..2a5c586
--- /dev/null
+++ b/src/prime-preset/tokens/components/button.ts
@@ -0,0 +1,157 @@
+/**
+ * Кастомная CSS-стилизация для компонента p-button.
+ * Публикует extend-токены как CSS-переменные и применяет глобальные стили.
+ * Подключается в components.ts: `import { buttonCss } from './components/button'`
+ */
+export const buttonCss = ({ dt }: { dt: (token: string) => string }): string => `
+ /* ─── Button extend: публикуем кастомные переменные в :root ─── */
+ :root {
+ --p-button-extend-disabled-background: ${dt('button.extend.disabledBackground')};
+ --p-button-extend-disabled-color: ${dt('button.extend.disabledColor')};
+ --p-button-extend-border-width: ${dt('button.extend.borderWidth')};
+ --p-button-extend-icon-size-sm: ${dt('button.extend.iconSize.sm')};
+ --p-button-extend-icon-size-md: ${dt('button.extend.iconSize.md')};
+ --p-button-extend-icon-size-lg: ${dt('button.extend.iconSize.lg')};
+ --p-button-extend-ext-link-padding-x: ${dt('button.extend.extLink.paddingX')};
+ --p-button-extend-ext-link-padding-y: ${dt('button.extend.extLink.paddingY')};
+ --p-button-extend-ext-link-color-hover: ${dt('button.extend.extLink.colorHover')};
+ --p-button-extend-ext-link-sm-icon-only-width: ${dt('button.extend.extLink.sm.iconOnlyWidth')};
+ --p-button-extend-ext-link-base-icon-only-width: ${dt('button.extend.extLink.base.iconOnlyWidth')};
+ --p-button-extend-ext-link-lg-icon-only-width: ${dt('button.extend.extLink.lg.iconOnlyWidth')};
+ --p-button-extend-ext-link-xlg-icon-only-width: ${dt('button.extend.extLink.xlg.iconOnlyWidth')};
+ --p-button-extend-ext-sm-border-radius: ${dt('button.extend.extSm.borderRadius')};
+ --p-button-extend-ext-sm-gap: ${dt('button.extend.extSm.gap')};
+ --p-button-extend-ext-lg-border-radius: ${dt('button.extend.extLg.borderRadius')};
+ --p-button-extend-ext-lg-gap: ${dt('button.extend.extLg.gap')};
+ --p-button-extend-ext-lg-height: ${dt('button.extend.extLg.height')};
+ --p-button-extend-ext-xlg-border-radius: ${dt('button.extend.extXlg.borderRadius')};
+ --p-button-extend-ext-xlg-gap: ${dt('button.extend.extXlg.gap')};
+ --p-button-extend-ext-xlg-icon-only-width: ${dt('button.extend.extXlg.iconOnlyWidth')};
+ --p-button-extend-ext-xlg-padding-x: ${dt('button.extend.extXlg.paddingX')};
+ --p-button-extend-ext-xlg-padding-y: ${dt('button.extend.extXlg.paddingY')};
+ --p-button-extend-ext-xlg-height: ${dt('button.extend.extXlg.height')};
+ }
+
+ /* ─── Шрифт для текста кнопки ─── */
+ .p-button.p-component .p-button-label {
+ font-family: var(--p-fonts-font-family-heading, 'TT Fellows', sans-serif);
+ }
+
+ /* ─── Размеры иконок ─── */
+ .p-button .p-button-icon {
+ font-size: var(--p-button-extend-icon-size-md);
+ }
+ .p-button.p-button-sm .p-button-icon {
+ font-size: var(--p-button-extend-icon-size-sm);
+ }
+ .p-button.p-button-lg .p-button-icon {
+ font-size: var(--p-button-extend-icon-size-lg);
+ }
+ .p-button-xlg.p-button .p-button-icon,
+ .p-button-link.p-button-xlg .p-button-icon {
+ font-size: var(--p-button-extend-icon-size-lg);
+ }
+
+ /* ─── Disabled / loading ─── */
+ .p-button:is(.p-disabled, :disabled, .p-button-loading) {
+ mix-blend-mode: inherit;
+ opacity: var(--p-opacity-1000);
+ color: var(--p-button-extend-disabled-color);
+ background: var(--p-button-extend-disabled-background);
+ border-color: var(--p-button-extend-disabled-background);
+ }
+ .p-button.p-button-outlined:is(.p-disabled, :disabled, .p-button-loading) {
+ color: var(--p-button-extend-disabled-color);
+ background: transparent;
+ border-color: transparent;
+ }
+ .p-button.p-button-text:is(.p-disabled, :disabled, .p-button-loading) {
+ color: var(--p-button-extend-disabled-color);
+ background: transparent;
+ border-color: transparent;
+ }
+ .p-button.p-button-link:is(.p-disabled, :disabled, .p-button-loading) {
+ color: var(--p-button-extend-disabled-color);
+ background: transparent;
+ border-color: transparent;
+ }
+
+ /* ─── Link кнопки ─── */
+ .p-button-link.p-button:is(.p-button, .p-button-xlg) {
+ padding: var(--p-button-extend-ext-link-padding-y) var(--p-button-extend-ext-link-padding-x);
+ }
+ .p-button-link.p-button {
+ width: min-content;
+ }
+ .p-button-link.p-button.p-button-xlg {
+ font-size: var(--p-fonts-font-size-600);
+ }
+ .p-button.p-button-link:not(:disabled):hover {
+ color: var(--p-button-extend-ext-link-color-hover);
+ }
+ .p-button.p-button-link:not(:disabled):hover .p-button-label {
+ text-decoration: none;
+ }
+
+ /* ─── Icon-only link кнопки ─── */
+ .p-button-link.p-button-icon-only {
+ width: var(--p-button-extend-ext-link-base-icon-only-width);
+ height: var(--p-button-extend-ext-link-base-icon-only-width);
+ }
+ .p-button-link.p-button-icon-only.p-button-sm {
+ width: var(--p-button-extend-ext-link-sm-icon-only-width);
+ height: var(--p-button-extend-ext-link-sm-icon-only-width);
+ }
+ .p-button-link.p-button-icon-only.p-button-lg {
+ width: var(--p-button-extend-ext-link-lg-icon-only-width);
+ height: var(--p-button-extend-ext-link-lg-icon-only-width);
+ }
+
+ /* ─── Line-height ─── */
+ .p-button-sm {
+ line-height: var(--p-fonts-line-height-250);
+ }
+ .p-button:is(.p-button-lg, .p-button-xlg) {
+ line-height: var(--p-fonts-line-height-550);
+ }
+
+ /* ─── Border-radius для lg / xlg ─── */
+ .p-button:is(.p-button-lg, .p-button-xlg):not(.p-button-rounded) {
+ border-radius: var(--p-button-extend-ext-lg-border-radius);
+ }
+ .p-button-xlg.p-button:not(.p-button-rounded) {
+ border-radius: var(--p-button-extend-ext-xlg-border-radius);
+ }
+
+ /* ─── Padding / font-size / height для lg ─── */
+ .p-button-lg.p-button:not(.p-button-icon-only):not(.p-button-link) {
+ padding: var(--p-button-lg-padding-y) var(--p-button-lg-padding-x);
+ font-size: var(--p-button-lg-font-size);
+ height: var(--p-controls-icon-only-850);
+ }
+
+ /* ─── Padding / font-size / height для xlg ─── */
+ .p-button-xlg.p-button:not(.p-button-icon-only):not(.p-button-link) {
+ padding: var(--p-button-extend-ext-xlg-padding-y) var(--p-button-extend-ext-xlg-padding-x);
+ font-size: var(--p-fonts-font-size-500);
+ height: var(--p-controls-icon-only-900);
+ }
+
+ /* ─── Icon-only размеры ─── */
+ .p-button-icon-only {
+ width: var(--p-button-icon-only-width);
+ height: var(--p-button-icon-only-width);
+ }
+ .p-button-sm.p-button-icon-only {
+ width: var(--p-button-sm-icon-only-width);
+ height: var(--p-button-sm-icon-only-width);
+ }
+ .p-button-lg.p-button-icon-only {
+ width: var(--p-button-lg-icon-only-width);
+ height: var(--p-button-lg-icon-only-width);
+ }
+ .p-button-xlg.p-button-icon-only {
+ width: var(--p-button-extend-ext-xlg-icon-only-width);
+ height: var(--p-button-extend-ext-xlg-icon-only-width);
+ }
+`;
diff --git a/src/prime-preset/tokens/primitive-default.json b/src/prime-preset/tokens/primitive-default.json
deleted file mode 100644
index 6dc1c0f..0000000
--- a/src/prime-preset/tokens/primitive-default.json
+++ /dev/null
@@ -1,377 +0,0 @@
-{
- "colors": {
- "alpha": {
- "white": {
- "10": "rgba(255, 255, 255, 0.1000)",
- "20": "rgba(255, 255, 255, 0.2000)",
- "30": "rgba(255, 255, 255, 0.3000)",
- "40": "rgba(255, 255, 255, 0.4000)",
- "50": "rgba(255, 255, 255, 0.5000)",
- "60": "rgba(255, 255, 255, 0.6000)",
- "70": "rgba(255, 255, 255, 0.7000)",
- "80": "rgba(255, 255, 255, 0.8000)",
- "90": "rgba(255, 255, 255, 0.9000)",
- "100": "#ffffff"
- },
- "black": {
- "10": "rgba(0, 0, 0, 0.1000)",
- "20": "rgba(0, 0, 0, 0.2000)",
- "30": "rgba(0, 0, 0, 0.3000)",
- "40": "rgba(0, 0, 0, 0.4000)",
- "50": "rgba(0, 0, 0, 0.5000)",
- "60": "rgba(0, 0, 0, 0.6000)",
- "70": "rgba(0, 0, 0, 0.7000)",
- "80": "rgba(0, 0, 0, 0.8000)",
- "90": "rgba(0, 0, 0, 0.9000)",
- "100": "#000000"
- }
- },
- "solid": {
- "purple": {
- "50": "#faf5ff",
- "100": "#f3e8ff",
- "200": "#e9d5ff",
- "300": "#d8b4fe",
- "400": "#c084fc",
- "500": "#a855f7",
- "600": "#9333ea",
- "700": "#7e22ce",
- "800": "#6b21a8",
- "900": "#581c87",
- "950": "#3b0764"
- },
- "fuchsia": {
- "50": "#fdf4ff",
- "100": "#fae8ff",
- "200": "#f5d0fe",
- "300": "#f0abfc",
- "400": "#e879f9",
- "500": "#d946ef",
- "600": "#c026d3",
- "700": "#a21caf",
- "800": "#86198f",
- "900": "#701a75",
- "950": "#4a044e"
- },
- "pink": {
- "50": "#fdf2f8",
- "100": "#fce7f3",
- "200": "#fbcfe8",
- "300": "#f9a8d4",
- "400": "#f472b6",
- "500": "#ec4899",
- "600": "#db2777",
- "700": "#be185d",
- "800": "#9d174d",
- "900": "#831843",
- "950": "#500724"
- },
- "rose": {
- "50": "#fff1f2",
- "100": "#ffe4e6",
- "200": "#fecdd3",
- "300": "#fda4af",
- "400": "#fb7185",
- "500": "#f43f5e",
- "600": "#e11d48",
- "700": "#be123c",
- "800": "#9f1239",
- "900": "#881337",
- "950": "#4c0519"
- },
- "teal": {
- "50": "#f0fdfa",
- "100": "#ccfbf1",
- "200": "#99f6e4",
- "300": "#5eead4",
- "400": "#2dd4bf",
- "500": "#14b8a6",
- "600": "#0d9488",
- "700": "#0f766e",
- "800": "#115e59",
- "900": "#134e4a",
- "950": "#042f2e"
- },
- "cyan": {
- "50": "#ecfeff",
- "100": "#cffafe",
- "200": "#a5f3fc",
- "300": "#67e8f9",
- "400": "#22d3ee",
- "500": "#06b6d4",
- "600": "#0891b2",
- "700": "#0e7490",
- "800": "#155e75",
- "900": "#164e63",
- "950": "#083344"
- },
- "sky": {
- "50": "#f0f9ff",
- "100": "#e0f2fe",
- "200": "#bae6fd",
- "300": "#7dd3fc",
- "400": "#38bdf8",
- "500": "#0ea5e9",
- "600": "#0284c7",
- "700": "#0369a1",
- "800": "#075985",
- "900": "#0c4a6e",
- "950": "#082f49"
- },
- "blue": {
- "50": "#fafdff",
- "100": "#f0f9ff",
- "200": "#d4ecfe",
- "300": "#aad7fb",
- "400": "#77baf4",
- "500": "#4496e8",
- "600": "#1e76cd",
- "700": "#18538d",
- "800": "#123a61",
- "900": "#0e2a45",
- "950": "#0c243b"
- },
- "indigo": {
- "50": "#eef2ff",
- "100": "#e0e7ff",
- "200": "#c7d2fe",
- "300": "#a5b4fc",
- "400": "#818cf8",
- "500": "#6366f1",
- "600": "#4f46e5",
- "700": "#4338ca",
- "800": "#3730a3",
- "900": "#312e81",
- "950": "#1e1b4b"
- },
- "violet": {
- "50": "#fcfaff",
- "100": "#f6f0ff",
- "200": "#e5d4fe",
- "300": "#cbaafb",
- "400": "#b284f5",
- "500": "#a265ec",
- "600": "#9457ea",
- "700": "#48188d",
- "800": "#321261",
- "900": "#240e45",
- "950": "#1f0c3b"
- },
- "emerald": {
- "50": "#ecfdf5",
- "100": "#d1fae5",
- "200": "#a7f3d0",
- "300": "#6ee7b7",
- "400": "#34d399",
- "500": "#10b981",
- "600": "#059669",
- "700": "#047857",
- "800": "#065f46",
- "900": "#064e3b",
- "950": "#022c22"
- },
- "green": {
- "50": "#fafffb",
- "100": "#f0fff3",
- "200": "#d4fedc",
- "300": "#aafbb7",
- "400": "#77f48a",
- "500": "#44e858",
- "600": "#1dc831",
- "700": "#168322",
- "800": "#12611b",
- "900": "#0e4514",
- "950": "#0c3b11"
- },
- "lime": {
- "50": "#f7fee7",
- "100": "#ecfccb",
- "200": "#d9f99d",
- "300": "#bef264",
- "400": "#a3e635",
- "500": "#84cc16",
- "600": "#65a30d",
- "700": "#4d7c0f",
- "800": "#3f6212",
- "900": "#365314",
- "950": "#1a2e05"
- },
- "red": {
- "50": "#fffafa",
- "100": "#fff0f0",
- "200": "#fed4d4",
- "300": "#fbacaa",
- "400": "#f47f77",
- "500": "#e85244",
- "600": "#db3424",
- "700": "#8d2218",
- "800": "#611912",
- "900": "#45120e",
- "950": "#3b100c"
- },
- "orange": {
- "50": "#fffbfa",
- "100": "#fff3f0",
- "200": "#ffddd5",
- "300": "#ffbca9",
- "400": "#ff9273",
- "500": "#fe6434",
- "600": "#d53f0b",
- "700": "#a83107",
- "800": "#752506",
- "900": "#561c05",
- "950": "#4b1905"
- },
- "amber": {
- "50": "#fffbeb",
- "100": "#fef3c7",
- "200": "#fde68a",
- "300": "#fcd34d",
- "400": "#fbbf24",
- "500": "#f59e0b",
- "600": "#d97706",
- "700": "#b45309",
- "800": "#92400e",
- "900": "#78350f",
- "950": "#451a03"
- },
- "yellow": {
- "50": "#fffdfa",
- "100": "#fff9f0",
- "200": "#ffeed4",
- "300": "#fddeaa",
- "400": "#facb75",
- "500": "#f5b83d",
- "600": "#dc9710",
- "700": "#9d6d0e",
- "800": "#6d4c0b",
- "900": "#4f3709",
- "950": "#453008"
- },
- "slate": {
- "50": "#f8fafc",
- "100": "#f1f5f9",
- "200": "#e2e8f0",
- "300": "#cbd5e1",
- "400": "#94a3b8",
- "500": "#64748b",
- "600": "#475569",
- "700": "#334155",
- "800": "#1e293b",
- "900": "#0f172a",
- "950": "#020617"
- },
- "gray": {
- "50": "#f9fafb",
- "100": "#f3f4f6",
- "200": "#e5e7eb",
- "300": "#d1d5db",
- "400": "#9ca3af",
- "500": "#6b7280",
- "600": "#4b5563",
- "700": "#374151",
- "800": "#1f2937",
- "900": "#111827",
- "950": "#030712"
- },
- "zinc": {
- "50": "#fafafa",
- "100": "#f0f0f1",
- "200": "#e2e2e4",
- "300": "#cecfd2",
- "400": "#a2a5a9",
- "500": "#85888e",
- "600": "#6d7076",
- "700": "#56595f",
- "800": "#404348",
- "900": "#2b2e33",
- "950": "#181a1f"
- },
- "neutral": {
- "50": "#fafafa",
- "100": "#f5f5f5",
- "200": "#e5e5e5",
- "300": "#d4d4d4",
- "400": "#a3a3a3",
- "500": "#737373",
- "600": "#525252",
- "700": "#404040",
- "800": "#262626",
- "900": "#171717",
- "950": "#0a0a0a"
- },
- "stone": {
- "50": "#fafaf9",
- "100": "#f5f5f4",
- "200": "#e7e5e4",
- "300": "#d6d3d1",
- "400": "#a8a29e",
- "500": "#78716c",
- "600": "#57534e",
- "700": "#44403c",
- "800": "#292524",
- "900": "#1c1917",
- "950": "#0c0a09"
- }
- }
- },
- "borderRadius": {
- "none": "0",
- "xs": "0.21875rem",
- "sm": "0.4375rem",
- "md": "0.65625rem",
- "lg": "0.875rem",
- "xl": "1.3125rem",
- "rounded": "62.4375rem"
- },
- "fonts": {
- "fontFamily": {
- "heading": "TT Fellows",
- "base": "PT Sans"
- },
- "fontWeight": {
- "regular": "25rem",
- "medium": "31.25rem",
- "demibold": "37.5rem",
- "bold": "43.75rem"
- },
- "fontSize": {
- "xs": "0.65625rem",
- "sm": "0.765625rem",
- "base": "0.875rem",
- "lg": "0.984375rem",
- "xl": "1.09375rem",
- "2xl": "1.3125rem",
- "3xl": "1.640625rem",
- "4xl": "1.96875rem",
- "5xl": "2.625rem",
- "6xl": "3.28125rem",
- "7xl": "3.9375rem",
- "8xl": "5.25rem"
- },
- "lineHeight": {
- "10": "0.6875rem",
- "15": "0.75rem",
- "20": "0.8125rem",
- "25": "0.875rem",
- "30": "0.9375rem",
- "35": "1rem",
- "40": "1.125rem",
- "45": "1.25rem",
- "50": "1.3125rem",
- "55": "1.375rem",
- "60": "1.5rem",
- "65": "1.625rem",
- "70": "2rem",
- "75": "2.0625rem",
- "80": "2.4375rem",
- "85": "2.9375rem",
- "auto": "auto"
- }
- },
- "opacity": {
- "0": "0",
- "50": "0.03125rem",
- "100": "0.0625rem"
- }
-}
diff --git a/src/prime-preset/tokens/primitive.ts b/src/prime-preset/tokens/primitive.ts
new file mode 100644
index 0000000..da002b6
--- /dev/null
+++ b/src/prime-preset/tokens/primitive.ts
@@ -0,0 +1,480 @@
+export default {
+ colors: {
+ alpha: {
+ white: {
+ '100': 'rgba(255, 255, 255, 0.1000)',
+ '200': 'rgba(255, 255, 255, 0.2000)',
+ '300': 'rgba(255, 255, 255, 0.3000)',
+ '400': 'rgba(255, 255, 255, 0.4000)',
+ '500': 'rgba(255, 255, 255, 0.5000)',
+ '600': 'rgba(255, 255, 255, 0.6000)',
+ '700': 'rgba(255, 255, 255, 0.7000)',
+ '800': 'rgba(255, 255, 255, 0.8000)',
+ '900': 'rgba(255, 255, 255, 0.9000)',
+ '1000': '#ffffff',
+ },
+ black: {
+ '100': 'rgba(0, 0, 0, 0.1000)',
+ '200': 'rgba(0, 0, 0, 0.2000)',
+ '300': 'rgba(0, 0, 0, 0.3000)',
+ '400': 'rgba(0, 0, 0, 0.4000)',
+ '500': 'rgba(0, 0, 0, 0.5000)',
+ '600': 'rgba(0, 0, 0, 0.6000)',
+ '700': 'rgba(0, 0, 0, 0.7000)',
+ '800': 'rgba(0, 0, 0, 0.8000)',
+ '900': 'rgba(0, 0, 0, 0.9000)',
+ '1000': '#000000',
+ },
+ },
+ solid: {
+ purple: {
+ '50': '#faf5ff',
+ '100': '#f3e8ff',
+ '200': '#e9d5ff',
+ '300': '#d8b4fe',
+ '400': '#c084fc',
+ '500': '#a855f7',
+ '600': '#9333ea',
+ '700': '#7e22ce',
+ '800': '#6b21a8',
+ '900': '#581c87',
+ '950': '#3b0764',
+ },
+ fuchsia: {
+ '50': '#fdf4ff',
+ '100': '#fae8ff',
+ '200': '#f5d0fe',
+ '300': '#f0abfc',
+ '400': '#e879f9',
+ '500': '#d946ef',
+ '600': '#c026d3',
+ '700': '#a21caf',
+ '800': '#86198f',
+ '900': '#701a75',
+ '950': '#4a044e',
+ },
+ pink: {
+ '50': '#fdf2f8',
+ '100': '#fce7f3',
+ '200': '#fbcfe8',
+ '300': '#f9a8d4',
+ '400': '#f472b6',
+ '500': '#ec4899',
+ '600': '#db2777',
+ '700': '#be185d',
+ '800': '#9d174d',
+ '900': '#831843',
+ '950': '#500724',
+ },
+ rose: {
+ '50': '#fff1f2',
+ '100': '#ffe4e6',
+ '200': '#fecdd3',
+ '300': '#fda4af',
+ '400': '#fb7185',
+ '500': '#f43f5e',
+ '600': '#e11d48',
+ '700': '#be123c',
+ '800': '#9f1239',
+ '900': '#881337',
+ '950': '#4c0519',
+ },
+ teal: {
+ '50': '#f0fdfa',
+ '100': '#ccfbf1',
+ '200': '#99f6e4',
+ '300': '#5eead4',
+ '400': '#2dd4bf',
+ '500': '#14b8a6',
+ '600': '#0d9488',
+ '700': '#0f766e',
+ '800': '#115e59',
+ '900': '#134e4a',
+ '950': '#042f2e',
+ },
+ cyan: {
+ '50': '#ecfeff',
+ '100': '#cffafe',
+ '200': '#a5f3fc',
+ '300': '#67e8f9',
+ '400': '#22d3ee',
+ '500': '#06b6d4',
+ '600': '#0891b2',
+ '700': '#0e7490',
+ '800': '#155e75',
+ '900': '#164e63',
+ '950': '#013138',
+ },
+ sky: {
+ '50': '#f0f9ff',
+ '100': '#e0f2fe',
+ '200': '#bae6fd',
+ '300': '#7dd3fc',
+ '400': '#38bdf8',
+ '500': '#0ea5e9',
+ '600': '#0284c7',
+ '700': '#0369a1',
+ '800': '#075985',
+ '900': '#0c4a6e',
+ '950': '#082f49',
+ },
+ blue: {
+ '50': '#fafdff',
+ '100': '#f0f9ff',
+ '200': '#d4ecfe',
+ '300': '#aad7fb',
+ '400': '#77baf4',
+ '500': '#4496e8',
+ '600': '#1e76cd',
+ '700': '#18538d',
+ '800': '#123a61',
+ '900': '#0e2a45',
+ '950': '#0c243b',
+ },
+ indigo: {
+ '50': '#eef2ff',
+ '100': '#e0e7ff',
+ '200': '#c7d2fe',
+ '300': '#a5b4fc',
+ '400': '#818cf8',
+ '500': '#6366f1',
+ '600': '#4f46e5',
+ '700': '#4338ca',
+ '800': '#3730a3',
+ '900': '#312e81',
+ '950': '#1e1b4b',
+ },
+ violet: {
+ '50': '#fcfaff',
+ '100': '#f6f0ff',
+ '200': '#e5d4fe',
+ '300': '#cbaafb',
+ '400': '#b284f5',
+ '500': '#a265ec',
+ '600': '#9457ea',
+ '700': '#48188d',
+ '800': '#321261',
+ '900': '#240e45',
+ '950': '#1f0c3b',
+ },
+ emerald: {
+ '50': '#ecfdf5',
+ '100': '#d1fae5',
+ '200': '#a7f3d0',
+ '300': '#6ee7b7',
+ '400': '#34d399',
+ '500': '#10b981',
+ '600': '#059669',
+ '700': '#047857',
+ '800': '#065f46',
+ '900': '#064e3b',
+ '950': '#022c22',
+ },
+ green: {
+ '50': '#fafffb',
+ '100': '#f0fff3',
+ '200': '#d4fedc',
+ '300': '#aafbb7',
+ '400': '#77f48a',
+ '500': '#44e858',
+ '600': '#1dc831',
+ '700': '#168322',
+ '800': '#12611b',
+ '900': '#0e4514',
+ '950': '#0c3b11',
+ },
+ lime: {
+ '50': '#f7fee7',
+ '100': '#ecfccb',
+ '200': '#d9f99d',
+ '300': '#bef264',
+ '400': '#a3e635',
+ '500': '#84cc16',
+ '600': '#65a30d',
+ '700': '#4d7c0f',
+ '800': '#3f6212',
+ '900': '#365314',
+ '950': '#1a2e05',
+ },
+ red: {
+ '50': '#fffafa',
+ '100': '#fff0f0',
+ '200': '#fed4d4',
+ '300': '#fbacaa',
+ '400': '#f47f77',
+ '500': '#e85244',
+ '600': '#db3424',
+ '700': '#8d2218',
+ '800': '#611912',
+ '900': '#45120e',
+ '950': '#3b100c',
+ },
+ orange: {
+ '50': '#fffbfa',
+ '100': '#fff3f0',
+ '200': '#ffddd5',
+ '300': '#ffbca9',
+ '400': '#ff9273',
+ '500': '#fe6434',
+ '600': '#d53f0b',
+ '700': '#a83107',
+ '800': '#752506',
+ '900': '#561c05',
+ '950': '#4b1905',
+ },
+ amber: {
+ '50': '#fffbeb',
+ '100': '#fef3c7',
+ '200': '#fde68a',
+ '300': '#fcd34d',
+ '400': '#fbbf24',
+ '500': '#f59e0b',
+ '600': '#d97706',
+ '700': '#b45309',
+ '800': '#92400e',
+ '900': '#78350f',
+ '950': '#451a03',
+ },
+ yellow: {
+ '50': '#fffdfa',
+ '100': '#fff9f0',
+ '200': '#ffeed4',
+ '300': '#fddeaa',
+ '400': '#facb75',
+ '500': '#f5b83d',
+ '600': '#dc9710',
+ '700': '#9d6d0e',
+ '800': '#6d4c0b',
+ '900': '#4f3709',
+ '950': '#453008',
+ },
+ slate: {
+ '50': '#f8fafc',
+ '100': '#f1f5f9',
+ '200': '#e2e8f0',
+ '300': '#cbd5e1',
+ '400': '#94a3b8',
+ '500': '#64748b',
+ '600': '#475569',
+ '700': '#334155',
+ '800': '#1e293b',
+ '900': '#0f172a',
+ '950': '#020617',
+ },
+ gray: {
+ '50': '#f9fafb',
+ '100': '#f3f4f6',
+ '200': '#e5e7eb',
+ '300': '#d1d5db',
+ '400': '#9ca3af',
+ '500': '#6b7280',
+ '600': '#4b5563',
+ '700': '#374151',
+ '800': '#1f2937',
+ '900': '#111827',
+ '950': '#030712',
+ },
+ zinc: {
+ '50': '#fafafa',
+ '100': '#f0f0f1',
+ '200': '#e2e2e4',
+ '300': '#cecfd2',
+ '400': '#a2a5a9',
+ '500': '#85888e',
+ '600': '#6d7076',
+ '700': '#56595f',
+ '800': '#404348',
+ '900': '#2b2e33',
+ '950': '#181a1f',
+ },
+ neutral: {
+ '50': '#fafafa',
+ '100': '#f5f5f5',
+ '200': '#e5e5e5',
+ '300': '#d4d4d4',
+ '400': '#a3a3a3',
+ '500': '#737373',
+ '600': '#525252',
+ '700': '#404040',
+ '800': '#262626',
+ '900': '#171717',
+ '950': '#0a0a0a',
+ },
+ stone: {
+ '50': '#fafaf9',
+ '100': '#f5f5f4',
+ '200': '#e7e5e4',
+ '300': '#d6d3d1',
+ '400': '#a8a29e',
+ '500': '#78716c',
+ '600': '#57534e',
+ '700': '#44403c',
+ '800': '#292524',
+ '900': '#1c1917',
+ '950': '#0c0a09',
+ },
+ },
+ },
+ borderRadius: {
+ '100': '0.25rem',
+ '200': '0.5rem',
+ '300': '0.75rem',
+ '400': '1rem',
+ '500': '1.5rem',
+ none: '0rem',
+ max: '71.3571rem',
+ },
+ borderWidth: {
+ '100': '0.0714rem',
+ '200': '0.1429rem',
+ '300': '0.25rem',
+ none: '0rem',
+ },
+ fonts: {
+ fontFamily: {
+ heading: 'TT Fellows',
+ base: 'PT Sans',
+ },
+ fontWeight: {
+ regular: '400',
+ medium: '500',
+ demibold: '600',
+ bold: '700',
+ },
+ fontSize: {
+ '100': '0.75rem',
+ '200': '0.875rem',
+ '300': '1rem',
+ '400': '1.125rem',
+ '500': '1.25rem',
+ '600': '1.5rem',
+ '650': '1.875rem',
+ '700': '2.25rem',
+ '750': '3rem',
+ '800': '3.75rem',
+ '900': '4.5rem',
+ '1000': '6rem',
+ },
+ lineHeight: {
+ '100': '0.7857rem',
+ '150': '0.8571rem',
+ '200': '0.9286rem',
+ '250': '1rem',
+ '300': '1.0714rem',
+ '350': '1.1429rem',
+ '400': '1.2857rem',
+ '450': '1.4286rem',
+ '500': '1.5rem',
+ '550': '1.5714rem',
+ '600': '1.7143rem',
+ '700': '1.8571rem',
+ '800': '2.2857rem',
+ '850': '2.3571rem',
+ '900': '2.7857rem',
+ '1000': '3.3571rem',
+ auto: 'auto',
+ },
+ },
+ spacing: {
+ none: '0rem',
+ '1x': '0.25rem',
+ '2x': '0.5rem',
+ '3x': '0.75rem',
+ '4x': '1rem',
+ '5x': '1.25rem',
+ '6x': '1.5rem',
+ '7x': '1.75rem',
+ '8x': '2rem',
+ '9x': '2.25rem',
+ '10x': '2.5rem',
+ '11x': '2.75rem',
+ '12x': '3rem',
+ '14x': '3.5rem',
+ '16x': '4rem',
+ '20x': '5rem',
+ '24x': '6rem',
+ '28x': '7rem',
+ '32x': '8rem',
+ '36x': '9rem',
+ '40x': '10rem',
+ },
+ sizing: {
+ none: '0rem',
+ min: '0.0714rem',
+ '1x': '0.25rem',
+ '2x': '0.5rem',
+ '3x': '0.75rem',
+ '4x': '1rem',
+ '5x': '1.25rem',
+ '6x': '1.5rem',
+ '7x': '1.75rem',
+ '8x': '2rem',
+ '9x': '2.25rem',
+ '10x': '2.5rem',
+ '11x': '2.75rem',
+ '12x': '3rem',
+ '14x': '3.5rem',
+ '16x': '4rem',
+ '20x': '5rem',
+ '24x': '6rem',
+ '28x': '7rem',
+ '32x': '8rem',
+ '36x': '9rem',
+ '40x': '10rem',
+ '44x': '11rem',
+ '48x': '12rem',
+ '52x': '13rem',
+ '56x': '14rem',
+ '60x': '15rem',
+ '64x': '16rem',
+ '68x': '17rem',
+ '72x': '18rem',
+ '76x': '19rem',
+ '80x': '20rem',
+ '84x': '21rem',
+ '88x': '22rem',
+ '92x': '23rem',
+ '96x': '24rem',
+ '100x': '25rem',
+ '104x': '26rem',
+ '108x': '27rem',
+ '112x': '28rem',
+ '116x': '29rem',
+ '120x': '30rem',
+ '124x': '34rem',
+ '128x': '45rem',
+ '132x': '50rem',
+ '136x': '54rem',
+ '140x': '58rem',
+ '144x': '60rem',
+ max: '100%',
+ },
+ shadows: {
+ '100': '0 0 0.1rem {colors.alpha.black.200}',
+ '200': '0 0 0.25rem {colors.alpha.black.200}',
+ '300': '0 0.1rem 0.25rem {colors.alpha.black.200}',
+ '400': '0 0.25rem 0.5rem {colors.alpha.black.200}',
+ '500': '0 0.5rem 1rem 0 {colors.alpha.black.200}',
+ none: 'none',
+ },
+ transition: {
+ easing: {
+ linear: 'linear',
+ in: 'cubic-bezier(0.55, 0.06, 0.7, 0.2)',
+ out: 'cubic-bezier(0.2, 0.6, 0.4, 1)',
+ inOut: 'cubic-bezier(0.65, 0.05, 0.35, 1)',
+ },
+ duration: {
+ '100': '140ms',
+ '200': '180ms',
+ '300': '240ms',
+ '400': '320ms',
+ '500': '400ms',
+ },
+ },
+ opacity: {
+ '250': '0.25',
+ '500': '0.5',
+ '1000': '1',
+ },
+};
diff --git a/src/prime-preset/tokens/semantic-default.json b/src/prime-preset/tokens/semantic-default.json
deleted file mode 100644
index 2167ac2..0000000
--- a/src/prime-preset/tokens/semantic-default.json
+++ /dev/null
@@ -1,112 +0,0 @@
-{
- "list": {
- "padding": "0.21875rem",
- "gap": "0.21875rem",
- "header": {
- "padding": "1rem 1rem 0 1rem"
- },
- "option": {
- "padding": "0.5rem 0.75rem",
- "borderRadius": "0.4375rem"
- },
- "optionGroup": {
- "padding": "0.5rem 0.75rem",
- "fontWeight": "{fonts.fontWeight.demibold}"
- }
- },
- "focusRing": {
- "width": "0.21875rem",
- "style": "none",
- "color": "#ffffff",
- "offset": "0",
- "shadow": "0 0 0 0.25rem {primary.200}"
- },
- "primary": {
- "50": "{colors.solid.green.50}",
- "100": "{colors.solid.green.100}",
- "200": "{colors.solid.green.200}",
- "300": "{colors.solid.green.300}",
- "400": "{colors.solid.green.400}",
- "500": "{colors.solid.green.500}",
- "600": "{colors.solid.green.600}",
- "700": "{colors.solid.green.700}",
- "800": "{colors.solid.green.800}",
- "900": "{colors.solid.green.900}",
- "950": "{colors.solid.green.950}"
- },
- "formField": {
- "paddingX": "0.65625rem",
- "paddingY": "0.65625rem",
- "borderRadius": "{borderRadius.md}",
- "transitionDuration": "{transitionDuration}",
- "sm": {
- "fontSize": "{fonts.fontSize.base}",
- "paddingX": "0.0390625rem",
- "paddingY": "0.03125rem"
- },
- "lg": {
- "fontSize": "{fonts.fontSize.base}",
- "paddingX": "0.0546875rem",
- "paddingY": "0.046875rem"
- },
- "focusRing": {
- "width": "{focusRing.width}",
- "style": "{focusRing.style}",
- "color": "{focusRing.color}",
- "offset": "{focusRing.offset}",
- "shadow": "{focusRing.shadow}"
- }
- },
- "content": {
- "borderRadius": "{borderRadius.md}"
- },
- "mask": {
- "transitionDuration": "{transitionDuration}"
- },
- "navigation": {
- "list": {
- "padding": "0.21875rem",
- "gap": "0.21875rem"
- },
- "item": {
- "padding": "0.625rem 1rem",
- "borderRadius": "{borderRadius.sm}",
- "gap": "0.4375rem"
- },
- "submenuLabel": {
- "padding": "0.625rem 1rem",
- "fontWeight": "{fonts.fontWeight.demibold}"
- },
- "submenuIcon": {
- "size": "1.09375rem"
- }
- },
- "overlay": {
- "select": {
- "borderRadius": "{borderRadius.md}",
- "shadow": "0 3.5px 7px 0 rgba(0, 0, 0, 0.2)"
- },
- "popover": {
- "borderRadius": "{borderRadius.sm}",
- "padding": "0.65625rem",
- "shadow": "0 1px 3px rgba(0, 0, 0, 0.1)"
- },
- "modal": {
- "borderRadius": "{borderRadius.xl}",
- "padding": "1.3125rem",
- "shadow": "0 1px 3px rgba(0, 0, 0, 0.3)"
- },
- "navigation": {
- "shadow": "0 2px 12px 0 rgba(0, 0, 0, 0.1)"
- }
- },
- "transitionDuration": "0.2s",
- "iconSizeMedium": "0.875rem",
- "iconSizeLarge": "1.09375rem",
- "anchorGutter": "0.125rem",
- "opacity": {
- "default": "{opacity.100}",
- "muted": "{opacity.50}",
- "disabled": "{opacity.0}"
- }
-}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/semantic.ts b/src/prime-preset/tokens/semantic.ts
new file mode 100644
index 0000000..31365dc
--- /dev/null
+++ b/src/prime-preset/tokens/semantic.ts
@@ -0,0 +1,838 @@
+export default {
+ list: {
+ padding: '{spacing.1x}',
+ gap: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ },
+ header: {
+ padding: '{spacing.4x} {spacing.4x} 0 {spacing.4x}',
+ },
+ option: {
+ padding: '{spacing.2x} {spacing.3x}',
+ borderRadius: '{borderRadius.200}',
+ },
+ optionGroup: {
+ padding: '{spacing.2x} {spacing.3x}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ },
+ },
+ focusRing: {
+ width: '{borderWidth.300}',
+ style: 'none',
+ color: '{focusRing.extend.success}',
+ offset: '0rem',
+ },
+ form: {
+ padding: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ '400': '{spacing.4x}',
+ '500': '{spacing.5x}',
+ '600': '{spacing.6x}',
+ '700': '{spacing.7x}',
+ },
+ borderRadius: {
+ '100': '{borderRadius.200}',
+ '200': '{borderRadius.300}',
+ '300': '{borderRadius.max}',
+ },
+ borderWidth: '{borderWidth.100}',
+ icon: {
+ '100': '{sizing.2x}',
+ '200': '{sizing.3x}',
+ '300': '{sizing.4x}',
+ '400': '{sizing.5x}',
+ '500': '{sizing.6x}',
+ },
+ transitionDuration: '{transition.duration.200}',
+ size: {
+ '100': '{sizing.min}',
+ '150': '{sizing.1x}',
+ '200': '{sizing.2x}',
+ '250': '{sizing.3x}',
+ '300': '{sizing.4x}',
+ '350': '{sizing.5x}',
+ '400': '{sizing.6x}',
+ '500': '{sizing.8x}',
+ '600': '{sizing.10x}',
+ '700': '{sizing.12x}',
+ '800': '{sizing.16x}',
+ '900': '{sizing.20x}',
+ },
+ width: '{sizing.68x}',
+ gap: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ '400': '{spacing.4x}',
+ },
+ focusRing: {
+ width: '{focusRing.width}',
+ style: '{focusRing.style}',
+ color: '{focusRing.color}',
+ offset: '{focusRing.offset}',
+ },
+ sm: {
+ width: '{sizing.60x}',
+ fontSize: '{fonts.fontSize.300}',
+ paddingX: '{spacing.3x}',
+ paddingY: '{spacing.3x}',
+ },
+ fontSize: '{fonts.fontSize.300}',
+ paddingX: '{spacing.4x}',
+ paddingY: '{spacing.4x}',
+ lg: {
+ width: '{sizing.76x}',
+ fontSize: '{fonts.fontSize.300}',
+ paddingX: '{spacing.5x}',
+ paddingY: '{spacing.5x}',
+ },
+ xlg: {
+ width: '{sizing.84x}',
+ fontSize: '{fonts.fontSize.300}',
+ paddingX: '{spacing.6x}',
+ paddingY: '{spacing.6x}',
+ },
+ },
+ content: {
+ borderRadius: '{borderRadius.300}',
+ padding: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.4x}',
+ '400': '{spacing.6x}',
+ '500': '{spacing.7x}',
+ },
+ borderWidth: '{sizing.min}',
+ gap: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ '400': '{spacing.4x}',
+ },
+ },
+ navigation: {
+ width: {
+ '100': '{borderWidth.100}',
+ '200': '{borderWidth.300}',
+ },
+ borderRadius: '{borderRadius.100}',
+ padding: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.3x}',
+ '300': '{spacing.4x}',
+ '400': '{spacing.6x}',
+ },
+ size: {
+ '100': '{sizing.1x}',
+ '200': '{sizing.2x}',
+ '300': '{sizing.5x}',
+ '400': '{sizing.8x}',
+ '500': '{sizing.16x}',
+ },
+ submenu: {
+ padding: '{spacing.5x}',
+ },
+ list: {
+ padding: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ },
+ gap: '{spacing.1x}',
+ },
+ item: {
+ padding: '{spacing.2x} {spacing.3x}',
+ borderRadius: '{borderRadius.200}',
+ gap: '{spacing.2x}',
+ },
+ submenuLabel: {
+ padding: '{spacing.2x} {spacing.3x}',
+ fontWeight: '{fonts.fontWeight.demibold}',
+ },
+ submenuIcon: {
+ size: '{fonts.fontSize.500}',
+ },
+ },
+ overlay: {
+ mask: {
+ transitionDuration: '{transition.duration.200}',
+ },
+ select: {
+ borderRadius: '{borderRadius.300}',
+ padding: '{spacing.1x}',
+ },
+ borderWidth: '{borderWidth.100}',
+ icon: {
+ size: {
+ '100': '{sizing.4x}',
+ '200': '{sizing.6x}',
+ '300': '{sizing.7x}',
+ '400': '{sizing.8x}',
+ '500': '{sizing.9x}',
+ },
+ },
+ popover: {
+ borderRadius: '{borderRadius.200}',
+ width: {
+ '100': '{sizing.2x}',
+ '200': '{sizing.3x}',
+ },
+ padding: {
+ '100': '{spacing.3x}',
+ '200': '{spacing.5x}',
+ },
+ },
+ modal: {
+ borderRadius: '{borderRadius.500}',
+ padding: {
+ '100': '{spacing.4x}',
+ '200': '{spacing.5x}',
+ '300': '{spacing.6x}',
+ },
+ },
+ gap: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ '400': '{spacing.4x}',
+ },
+ width: '{sizing.100x}',
+ drawer: {
+ padding: '{spacing.2x}',
+ },
+ sm: {
+ width: '{sizing.80x}',
+ },
+ lg: {
+ width: '{sizing.120x}',
+ },
+ xlg: {
+ width: '{sizing.128x}',
+ },
+ },
+ feedback: {
+ transitionDuration: '{transition.duration.200}',
+ width: {
+ '100': '{sizing.min}',
+ '200': '{sizing.1x}',
+ '300': '{sizing.2x}',
+ '400': '{sizing.3x}',
+ '500': '{sizing.4x}',
+ '550': '{sizing.5x}',
+ '600': '{sizing.6x}',
+ '650': '{sizing.7x}',
+ '700': '{sizing.8x}',
+ '800': '{sizing.12x}',
+ '900': '{sizing.16x}',
+ },
+ icon: {
+ size: {
+ '100': '{sizing.2x}',
+ '200': '{sizing.4x}',
+ '300': '{sizing.6x}',
+ '350': '{sizing.7x}',
+ '400': '{sizing.8x}',
+ '500': '{sizing.9x}',
+ },
+ },
+ padding: {
+ '100': '{spacing.2x}',
+ '200': '{spacing.4x}',
+ },
+ height: {
+ '100': '{sizing.2x}',
+ '200': '{sizing.3x}',
+ '300': '{sizing.4x}',
+ '400': '{sizing.5x}',
+ '500': '{sizing.6x}',
+ '600': '{sizing.7x}',
+ '650': '{sizing.8x}',
+ '700': '{sizing.9x}',
+ '750': '{sizing.10x}',
+ '800': '{sizing.11x}',
+ '850': '{sizing.12x}',
+ '900': '{sizing.16x}',
+ },
+ gap: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ '400': '{spacing.4x}',
+ },
+ },
+ data: {
+ padding: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ '400': '{spacing.4x}',
+ '500': '{spacing.5x}',
+ },
+ icon: {
+ size: {
+ '100': '{sizing.4x}',
+ '200': '{sizing.5x}',
+ '300': '{sizing.6x}',
+ '400': '{sizing.7x}',
+ '500': '{sizing.8x}',
+ '600': '{sizing.9x}',
+ '700': '{sizing.10x}',
+ },
+ },
+ transitionDuration: '{transition.duration.200}',
+ borderWidth: '{borderWidth.none}',
+ borderRadius: '{borderRadius.100}',
+ gap: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ },
+ width: {
+ '100': '{sizing.min}',
+ '200': '{sizing.1x}',
+ '300': '{sizing.2x}',
+ '400': '{sizing.20x}',
+ },
+ },
+ media: {
+ size: {
+ '100': '{sizing.1x}',
+ '200': '{sizing.2x}',
+ '300': '{sizing.8x}',
+ '400': '{sizing.10x}',
+ '500': '{sizing.14x}',
+ '600': '{sizing.16x}',
+ },
+ borderRadius: {
+ '100': '{borderRadius.200}',
+ '200': '{borderRadius.300}',
+ '300': '{borderRadius.400}',
+ '400': '{borderRadius.500}',
+ max: '{borderRadius.max}',
+ },
+ icon: {
+ size: {
+ '100': '{sizing.4x}',
+ '200': '{sizing.6x}',
+ '300': '{sizing.8x}',
+ },
+ },
+ transitionDuration: '{transition.duration.200}',
+ padding: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ '400': '{spacing.4x}',
+ '500': '{spacing.5x}',
+ '600': '{spacing.6x}',
+ },
+ gap: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ },
+ },
+ controls: {
+ iconOnly: {
+ '100': '{sizing.2x}',
+ '200': '{sizing.4x}',
+ '300': '{sizing.5x}',
+ '400': '{sizing.6x}',
+ '500': '{sizing.7x}',
+ '600': '{sizing.8x}',
+ '700': '{sizing.10x}',
+ '800': '{sizing.11x}',
+ '850': '{sizing.14x}',
+ '900': '{sizing.16x}',
+ },
+ borderRadius: {
+ '100': '{borderRadius.300}',
+ '200': '{borderRadius.400}',
+ max: '{borderRadius.max}',
+ },
+ transitionDuration: '{transition.duration.200}',
+ padding: {
+ '100': '{spacing.1x}',
+ '200': '{spacing.2x}',
+ '300': '{spacing.3x}',
+ '400': '{spacing.4x}',
+ '500': '{spacing.5x}',
+ '600': '{spacing.6x}',
+ },
+ gap: {
+ '100': '{spacing.2x}',
+ '200': '{spacing.3x}',
+ '300': '{spacing.4x}',
+ },
+ width: {
+ '100': '{sizing.min}',
+ },
+ },
+ colorScheme: {
+ light: {
+ success: {
+ '50': '{colors.solid.green.50}',
+ '100': '{colors.solid.green.100}',
+ '200': '{colors.solid.green.200}',
+ '300': '{colors.solid.green.300}',
+ '400': '{colors.solid.green.400}',
+ '500': '{colors.solid.green.500}',
+ '600': '{colors.solid.green.600}',
+ '700': '{colors.solid.green.700}',
+ '800': '{colors.solid.green.800}',
+ '900': '{colors.solid.green.900}',
+ '950': '{colors.solid.green.950}',
+ },
+ info: {
+ '50': '{colors.solid.blue.50}',
+ '100': '{colors.solid.blue.100}',
+ '200': '{colors.solid.blue.200}',
+ '300': '{colors.solid.blue.300}',
+ '400': '{colors.solid.blue.400}',
+ '500': '{colors.solid.blue.500}',
+ '600': '{colors.solid.blue.600}',
+ '700': '{colors.solid.blue.700}',
+ '800': '{colors.solid.blue.800}',
+ '900': '{colors.solid.blue.900}',
+ '950': '{colors.solid.blue.950}',
+ },
+ warn: {
+ '50': '{colors.solid.yellow.50}',
+ '100': '{colors.solid.yellow.100}',
+ '200': '{colors.solid.yellow.200}',
+ '300': '{colors.solid.yellow.300}',
+ '400': '{colors.solid.yellow.400}',
+ '500': '{colors.solid.yellow.500}',
+ '600': '{colors.solid.yellow.600}',
+ '700': '{colors.solid.yellow.700}',
+ '800': '{colors.solid.yellow.800}',
+ '900': '{colors.solid.yellow.900}',
+ '950': '{colors.solid.yellow.950}',
+ },
+ transparent: 'rgba(255, 255, 255, 0.0001)',
+ help: {
+ '50': '{colors.solid.purple.50}',
+ '100': '{colors.solid.purple.100}',
+ '200': '{colors.solid.purple.200}',
+ '300': '{colors.solid.purple.300}',
+ '400': '{colors.solid.purple.400}',
+ '500': '{colors.solid.purple.500}',
+ '600': '{colors.solid.purple.600}',
+ '700': '{colors.solid.purple.700}',
+ '800': '{colors.solid.purple.800}',
+ '900': '{colors.solid.purple.900}',
+ '950': '{colors.solid.purple.950}',
+ },
+ error: {
+ '50': '{colors.solid.red.50}',
+ '100': '{colors.solid.red.100}',
+ '200': '{colors.solid.red.200}',
+ '300': '{colors.solid.red.300}',
+ '400': '{colors.solid.red.400}',
+ '500': '{colors.solid.red.500}',
+ '600': '{colors.solid.red.600}',
+ '700': '{colors.solid.red.700}',
+ '800': '{colors.solid.red.800}',
+ '900': '{colors.solid.red.900}',
+ '950': '{colors.solid.red.950}',
+ },
+ surface: {
+ '0': '{colors.alpha.white.1000}',
+ '50': '{colors.solid.zinc.50}',
+ '100': '{colors.solid.zinc.100}',
+ '200': '{colors.solid.zinc.200}',
+ '300': '{colors.solid.zinc.300}',
+ '400': '{colors.solid.zinc.400}',
+ '500': '{colors.solid.zinc.500}',
+ '600': '{colors.solid.zinc.600}',
+ '700': '{colors.solid.zinc.700}',
+ '800': '{colors.solid.zinc.800}',
+ '900': '{colors.solid.zinc.900}',
+ '950': '{colors.solid.zinc.950}',
+ },
+ primary: {
+ color: '{colors.solid.green.500}',
+ contrastColor: '{colors.alpha.white.1000}',
+ hoverColor: '{colors.solid.green.600}',
+ activeColor: '{colors.solid.green.700}',
+ hoverBackground: '{colors.solid.green.50}',
+ activeBackground: '{colors.solid.green.100}',
+ borderColor: '{colors.solid.green.200}',
+ selectedBackground: '{colors.solid.green.500}',
+ selectedHoverBackground: '{colors.solid.green.600}',
+ },
+ highlight: {
+ background: '{colors.solid.zinc.900}',
+ focusBackground: '{colors.solid.zinc.800}',
+ color: '{colors.alpha.white.1000}',
+ focusColor: '{colors.alpha.white.1000}',
+ },
+ focusRing: {
+ shadow: '{shadows.200}',
+ extend: {
+ invalid: '{colors.solid.red.200}',
+ success: '{colors.solid.green.200}',
+ warning: '{colors.solid.yellow.200}',
+ info: '{colors.solid.blue.200}',
+ },
+ },
+ mask: {
+ background: '{colors.alpha.black.400}',
+ color: '{surface.200}',
+ },
+ form: {
+ background: '{colors.alpha.white.1000}',
+ disabledBackground: '{colors.solid.zinc.200}',
+ readonlyBackground: '{colors.solid.zinc.100}',
+ filledBackground: '{colors.alpha.white.1000}',
+ filledHoverBackground: '{colors.alpha.white.1000}',
+ filledFocusBackground: '{colors.alpha.white.1000}',
+ borderColor: '{colors.solid.zinc.300}',
+ hoverBorderPrimaryColor: '{colors.solid.zinc.900}',
+ focusBorderPrimaryColor: '{colors.solid.zinc.900}',
+ hoverBorderSecondaryColor: '{colors.solid.green.600}',
+ focusBorderSecondaryColor: '{colors.solid.green.600}',
+ invalidBorderColor: '{colors.solid.red.400}',
+ color: '{colors.solid.zinc.950}',
+ disabledColor: '{colors.solid.zinc.500}',
+ placeholderColor: '{colors.solid.zinc.500}',
+ invalidPlaceholderColor: '{colors.solid.red.600}',
+ floatLabelColor: '{colors.solid.zinc.500}',
+ floatLabelFocusColor: '{colors.solid.zinc.500}',
+ floatLabelActiveColor: '{colors.solid.zinc.500}',
+ floatLabelInvalidColor: '{form.invalidPlaceholderColor}',
+ iconColor: '{colors.solid.zinc.950}',
+ backgroundHandler: '{colors.alpha.white.1000}',
+ shadow: '{shadows.200}',
+ },
+ text: {
+ color: '{colors.solid.zinc.900}',
+ extend: {
+ colorPrimaryStatic: '{colors.solid.zinc.900}',
+ colorSecondaryStatic: '{colors.alpha.white.1000}',
+ colorInverted: '{colors.alpha.white.1000}',
+ },
+ hoverColor: '{colors.solid.zinc.700}',
+ primaryColor: '{colors.solid.green.600}',
+ hoverPrimaryColor: '{colors.solid.green.700}',
+ secondaryColor: '{colors.solid.zinc.600}',
+ hoverSecondaryColor: '{colors.solid.zinc.400}',
+ mutedColor: '{colors.solid.zinc.500}',
+ hoverMutedColor: '{colors.solid.zinc.300}',
+ disabledColor: '{colors.solid.zinc.300}',
+ infoColor: '{colors.solid.blue.600}',
+ successColor: '{colors.solid.green.700}',
+ dangerColor: '{colors.solid.red.600}',
+ warningColor: '{colors.solid.yellow.600}',
+ helpColor: '{colors.solid.purple.600}',
+ },
+ content: {
+ background: '{colors.alpha.white.1000}',
+ hoverBackground: '{colors.solid.zinc.100}',
+ borderColor: '{colors.solid.zinc.200}',
+ activeBorderColor: '{colors.solid.zinc.800}',
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ shadow: '{shadows.400}',
+ },
+ list: {
+ option: {
+ background: '{colors.alpha.white.1000}',
+ focusBackground: '{colors.solid.zinc.100}',
+ selectedBackground: '{colors.solid.zinc.900}',
+ selectedFocusBackground: '{colors.solid.zinc.700}',
+ color: '{text.color}',
+ focusColor: '{text.color}',
+ selectedColor: '{text.extend.colorInverted}',
+ selectedFocusColor: '{text.extend.colorInverted}',
+ icon: {
+ color: '{text.color}',
+ focusColor: '{text.color}',
+ },
+ },
+ optionGroup: {
+ background: '{colors.alpha.white.1000}',
+ color: '{text.mutedColor}',
+ },
+ },
+ overlay: {
+ select: {
+ background: '{colors.alpha.white.1000}',
+ borderColor: '{colors.solid.zinc.200}',
+ color: '{text.color}',
+ shadow: '0 0.25rem 0.5rem {colors.alpha.black.200}',
+ },
+ popover: {
+ background: '{colors.alpha.white.1000}',
+ borderColor: '{form.borderColor}',
+ color: '{text.color}',
+ shadow: '{shadows.400}',
+ },
+ modal: {
+ background: '{colors.alpha.white.1000}',
+ backdrop: '{colors.alpha.black.300}',
+ borderColor: '{colors.solid.zinc.200}',
+ color: '{text.color}',
+ shadow: '{shadows.200}',
+ },
+ },
+ navigation: {
+ submenuLabel: {
+ background: 'rgba(255, 255, 255, 0.0000)',
+ color: '{text.mutedColor}',
+ },
+ submenuIcon: {
+ color: '{colors.solid.zinc.900}',
+ focusColor: '{colors.solid.zinc.900}',
+ activeColor: '{colors.alpha.white.1000}',
+ },
+ item: {
+ focusBackground: '{colors.solid.zinc.100}',
+ activeBackground: '{colors.solid.zinc.900}',
+ color: '{colors.solid.zinc.900}',
+ focusColor: '{colors.solid.zinc.900}',
+ icon: {
+ color: '{colors.solid.zinc.900}',
+ focusColor: '{colors.solid.zinc.900}',
+ activeColor: '{colors.alpha.white.1000}',
+ },
+ activeColor: '{colors.alpha.white.1000}',
+ },
+ shadow: '{shadows.400}',
+ },
+ },
+ dark: {
+ success: {
+ '50': '{colors.solid.green.950}',
+ '100': '{colors.solid.green.900}',
+ '200': '{colors.solid.green.800}',
+ '300': '{colors.solid.green.700}',
+ '400': '{colors.solid.green.600}',
+ '500': '{colors.solid.green.500}',
+ '600': '{colors.solid.green.400}',
+ '700': '{colors.solid.green.300}',
+ '800': '{colors.solid.green.200}',
+ '900': '{colors.solid.green.100}',
+ '950': '{colors.solid.green.50}',
+ },
+ info: {
+ '50': '{colors.solid.blue.950}',
+ '100': '{colors.solid.blue.900}',
+ '200': '{colors.solid.blue.800}',
+ '300': '{colors.solid.blue.700}',
+ '400': '{colors.solid.blue.600}',
+ '500': '{colors.solid.blue.500}',
+ '600': '{colors.solid.blue.400}',
+ '700': '{colors.solid.blue.300}',
+ '800': '{colors.solid.blue.200}',
+ '900': '{colors.solid.blue.100}',
+ '950': '{colors.solid.blue.50}',
+ },
+ warn: {
+ '50': '{colors.solid.yellow.950}',
+ '100': '{colors.solid.yellow.900}',
+ '200': '{colors.solid.yellow.800}',
+ '300': '{colors.solid.yellow.700}',
+ '400': '{colors.solid.yellow.600}',
+ '500': '{colors.solid.yellow.500}',
+ '600': '{colors.solid.yellow.400}',
+ '700': '{colors.solid.yellow.300}',
+ '800': '{colors.solid.yellow.200}',
+ '900': '{colors.solid.yellow.100}',
+ '950': '{colors.solid.yellow.50}',
+ },
+ transparent: 'rgba(0, 0, 0, 0.0001)',
+ help: {
+ '50': '{colors.solid.purple.950}',
+ '100': '{colors.solid.purple.900}',
+ '200': '{colors.solid.purple.800}',
+ '300': '{colors.solid.purple.700}',
+ '400': '{colors.solid.purple.600}',
+ '500': '{colors.solid.purple.500}',
+ '600': '{colors.solid.purple.400}',
+ '700': '{colors.solid.purple.300}',
+ '800': '{colors.solid.purple.200}',
+ '900': '{colors.solid.purple.100}',
+ '950': '{colors.solid.purple.50}',
+ },
+ error: {
+ '50': '{colors.solid.red.950}',
+ '100': '{colors.solid.red.900}',
+ '200': '{colors.solid.red.800}',
+ '300': '{colors.solid.red.700}',
+ '400': '{colors.solid.red.600}',
+ '500': '{colors.solid.red.500}',
+ '600': '{colors.solid.red.400}',
+ '700': '{colors.solid.red.300}',
+ '800': '{colors.solid.red.200}',
+ '900': '{colors.solid.red.100}',
+ '950': '{colors.solid.red.50}',
+ },
+ surface: {
+ '0': '{colors.alpha.black.1000}',
+ '50': '{colors.solid.zinc.950}',
+ '100': '{colors.solid.zinc.900}',
+ '200': '{colors.solid.zinc.800}',
+ '300': '{colors.solid.zinc.700}',
+ '400': '{colors.solid.zinc.600}',
+ '500': '{colors.solid.zinc.500}',
+ '600': '{colors.solid.zinc.400}',
+ '700': '{colors.solid.zinc.300}',
+ '800': '{colors.solid.zinc.200}',
+ '900': '{colors.solid.zinc.100}',
+ '950': '{colors.solid.zinc.50}',
+ },
+ primary: {
+ color: '{colors.solid.green.500}',
+ contrastColor: '{colors.solid.zinc.900}',
+ hoverColor: '{colors.solid.green.400}',
+ activeColor: '{colors.solid.green.300}',
+ hoverBackground: '{colors.solid.green.950}',
+ activeBackground: '{colors.solid.green.900}',
+ borderColor: '{colors.solid.green.800}',
+ selectedBackground: '{colors.solid.green.500}',
+ selectedHoverBackground: '{colors.solid.green.600}',
+ },
+ highlight: {
+ background: '{colors.solid.zinc.100}',
+ focusBackground: '{colors.solid.zinc.200}',
+ color: '{colors.solid.zinc.900}',
+ focusColor: '{colors.solid.zinc.900}',
+ },
+ focusRing: {
+ shadow: '{shadows.200}',
+ extend: {
+ invalid: '{colors.solid.red.800}',
+ success: '{colors.solid.green.800}',
+ warning: '{colors.solid.yellow.800}',
+ info: '{colors.solid.blue.800}',
+ },
+ },
+ mask: {
+ background: '{colors.alpha.black.600}',
+ color: '{surface.800}',
+ },
+ form: {
+ background: '{colors.solid.zinc.950}',
+ disabledBackground: '{colors.solid.zinc.800}',
+ readonlyBackground: '{colors.solid.zinc.900}',
+ filledBackground: '{colors.solid.zinc.950}',
+ filledHoverBackground: '{colors.solid.zinc.950}',
+ filledFocusBackground: '{colors.solid.zinc.950}',
+ borderColor: '{colors.solid.zinc.700}',
+ hoverBorderPrimaryColor: '{colors.solid.zinc.100}',
+ focusBorderPrimaryColor: '{colors.solid.zinc.100}',
+ hoverBorderSecondaryColor: '{colors.solid.green.400}',
+ focusBorderSecondaryColor: '{colors.solid.green.400}',
+ invalidBorderColor: '{colors.solid.red.600}',
+ color: '{colors.alpha.white.1000}',
+ disabledColor: '{colors.solid.zinc.500}',
+ placeholderColor: '{colors.solid.zinc.500}',
+ invalidPlaceholderColor: '{colors.solid.red.400}',
+ floatLabelColor: '{colors.solid.zinc.500}',
+ floatLabelFocusColor: '{colors.solid.zinc.500}',
+ floatLabelActiveColor: '{colors.solid.zinc.500}',
+ floatLabelInvalidColor: '{form.invalidPlaceholderColor}',
+ iconColor: '{colors.alpha.white.1000}',
+ backgroundHandler: '{colors.alpha.white.1000}',
+ shadow: '{shadows.200}',
+ },
+ text: {
+ color: '{colors.alpha.white.1000}',
+ extend: {
+ colorPrimaryStatic: '{colors.solid.zinc.900}',
+ colorSecondaryStatic: '{colors.alpha.white.1000}',
+ colorInverted: '{colors.solid.zinc.900}',
+ },
+ hoverColor: '{colors.solid.zinc.300}',
+ primaryColor: '{colors.solid.green.400}',
+ hoverPrimaryColor: '{colors.solid.green.300}',
+ secondaryColor: '{colors.solid.zinc.400}',
+ hoverSecondaryColor: '{colors.solid.zinc.600}',
+ mutedColor: '{colors.solid.zinc.500}',
+ hoverMutedColor: '{colors.solid.zinc.700}',
+ disabledColor: '{colors.solid.zinc.700}',
+ infoColor: '{colors.solid.blue.400}',
+ successColor: '{colors.solid.green.400}',
+ dangerColor: '{colors.solid.red.400}',
+ warningColor: '{colors.solid.yellow.400}',
+ helpColor: '{colors.solid.purple.400}',
+ },
+ content: {
+ background: '{colors.solid.zinc.900}',
+ hoverBackground: '{colors.solid.zinc.800}',
+ borderColor: '{colors.solid.zinc.800}',
+ activeBorderColor: '{colors.solid.zinc.200}',
+ color: '{text.color}',
+ hoverColor: '{text.hoverColor}',
+ shadow: '{shadows.400}',
+ },
+ list: {
+ option: {
+ background: '{colors.solid.zinc.900}',
+ focusBackground: '{colors.solid.zinc.800}',
+ selectedBackground: '{colors.solid.zinc.100}',
+ selectedFocusBackground: '{colors.solid.zinc.300}',
+ color: '{text.color}',
+ focusColor: '{text.color}',
+ selectedColor: '{text.extend.colorInverted}',
+ selectedFocusColor: '{text.extend.colorInverted}',
+ icon: {
+ color: '{text.color}',
+ focusColor: '{text.color}',
+ },
+ },
+ optionGroup: {
+ background: '{colors.solid.zinc.900}',
+ color: '{text.mutedColor}',
+ },
+ },
+ overlay: {
+ select: {
+ background: '{colors.solid.zinc.900}',
+ borderColor: '{colors.solid.zinc.800}',
+ color: '{text.color}',
+ shadow: '{shadows.400}',
+ },
+ popover: {
+ background: '{colors.solid.zinc.900}',
+ borderColor: '{form.borderColor}',
+ color: '{text.color}',
+ shadow: '{shadows.400}',
+ },
+ modal: {
+ background: '{colors.solid.zinc.900}',
+ backdrop: '{colors.alpha.black.300}',
+ borderColor: '{colors.solid.zinc.800}',
+ color: '{text.color}',
+ shadow: '{shadows.200}',
+ },
+ },
+ navigation: {
+ submenuLabel: {
+ background: 'rgba(255, 255, 255, 0.0000)',
+ color: '{text.mutedColor}',
+ },
+ submenuIcon: {
+ color: '{colors.solid.zinc.100}',
+ focusColor: '{colors.solid.zinc.100}',
+ activeColor: '{colors.solid.zinc.900}',
+ },
+ item: {
+ focusBackground: '{colors.solid.zinc.900}',
+ activeBackground: '{colors.solid.zinc.100}',
+ color: '{colors.alpha.white.1000}',
+ focusColor: '{colors.alpha.white.1000}',
+ icon: {
+ color: '{colors.alpha.white.1000}',
+ focusColor: '{colors.alpha.white.1000}',
+ activeColor: '{colors.solid.zinc.900}',
+ },
+ activeColor: '{colors.solid.zinc.900}',
+ },
+ shadow: '{shadows.400}',
+ },
+ },
+ },
+};
diff --git a/src/prime-preset/tokens/sizing-base.json b/src/prime-preset/tokens/sizing-base.json
deleted file mode 100644
index cb9c0f3..0000000
--- a/src/prime-preset/tokens/sizing-base.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "sizingInputtext": {
- "root": {
- "fontSize": "0.875rem",
- "paddingX": "0.875rem",
- "paddingY": "0.875rem"
- }
- },
- "sizingSelect": {
- "root": {
- "fontSize": "0.875rem",
- "paddingX": "0.875rem",
- "paddingY": "0.875rem"
- }
- },
- "sizingDialog": {
- "extra": {
- "minWidth": "21.875rem"
- }
- },
- "sizingMessage": {
- "width": "21.875rem"
- },
- "sizingToast": {
- "width": "21.875rem"
- },
- "sizingDrawer": {
- "width": "21.875rem"
- }
-}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/sizing-lg.json b/src/prime-preset/tokens/sizing-lg.json
deleted file mode 100644
index 9e2f0d6..0000000
--- a/src/prime-preset/tokens/sizing-lg.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "sizingInputtext": {
- "root": {
- "fontSize": "0.875rem",
- "paddingX": "1.09375rem",
- "paddingY": "1.09375rem"
- }
- },
- "sizingSelect": {
- "root": {
- "fontSize": "0.875rem",
- "paddingX": "1.09375rem",
- "paddingY": "1.09375rem"
- }
- },
- "sizingDialog": {
- "extra": {
- "minWidth": "26.25rem"
- }
- },
- "sizingMessage": {
- "width": "26.25rem"
- },
- "sizingToast": {
- "width": "26.25rem"
- },
- "sizingDrawer": {
- "width": "26.25rem"
- }
-}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/sizing-sm.json b/src/prime-preset/tokens/sizing-sm.json
deleted file mode 100644
index 8118b77..0000000
--- a/src/prime-preset/tokens/sizing-sm.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "sizingInputtext": {
- "root": {
- "fontSize": "0.875rem",
- "paddingX": "0.65625rem",
- "paddingY": "0.65625rem"
- }
- },
- "sizingSelect": {
- "root": {
- "fontSize": "0.875rem",
- "paddingX": "0.65625rem",
- "paddingY": "0.65625rem"
- }
- },
- "sizingDialog": {
- "extra": {
- "minWidth": "17.5rem"
- }
- },
- "sizingMessage": {
- "width": "17.5rem"
- },
- "sizingToast": {
- "width": "17.5rem"
- },
- "sizingDrawer": {
- "width": "17.5rem"
- }
-}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/sizing-xlg.json b/src/prime-preset/tokens/sizing-xlg.json
deleted file mode 100644
index 8dc3516..0000000
--- a/src/prime-preset/tokens/sizing-xlg.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "sizingInputtext": {
- "root": {
- "fontSize": "0.875rem",
- "paddingX": "1.3125rem",
- "paddingY": "1.3125rem"
- }
- },
- "sizingSelect": {
- "root": {
- "fontSize": "0.875rem",
- "paddingX": "1.3125rem",
- "paddingY": "1.3125rem"
- }
- },
- "sizingDialog": {
- "extra": {
- "minWidth": "39.375rem"
- }
- },
- "sizingMessage": {
- "width": "39.375rem"
- },
- "sizingToast": {
- "width": "39.375rem"
- },
- "sizingDrawer": {
- "width": "39.375rem"
- }
-}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/theme-dark.json b/src/prime-preset/tokens/theme-dark.json
deleted file mode 100644
index 9e1b794..0000000
--- a/src/prime-preset/tokens/theme-dark.json
+++ /dev/null
@@ -1,212 +0,0 @@
-{
- "success": {
- "50": "{colors.solid.green.950}",
- "100": "{colors.solid.green.900}",
- "200": "{colors.solid.green.800}",
- "300": "{colors.solid.green.700}",
- "400": "{colors.solid.green.600}",
- "500": "{colors.solid.green.500}",
- "600": "{colors.solid.green.400}",
- "700": "{colors.solid.green.300}",
- "800": "{colors.solid.green.200}",
- "900": "{colors.solid.green.100}",
- "950": "{colors.solid.green.50}"
- },
- "info": {
- "50": "{colors.solid.blue.950}",
- "100": "{colors.solid.blue.900}",
- "200": "{colors.solid.blue.800}",
- "300": "{colors.solid.blue.700}",
- "400": "{colors.solid.blue.600}",
- "500": "{colors.solid.blue.500}",
- "600": "{colors.solid.blue.400}",
- "700": "{colors.solid.blue.300}",
- "800": "{colors.solid.blue.200}",
- "900": "{colors.solid.blue.100}",
- "950": "{colors.solid.blue.50}"
- },
- "warn": {
- "50": "{colors.solid.yellow.950}",
- "100": "{colors.solid.yellow.900}",
- "200": "{colors.solid.yellow.800}",
- "300": "{colors.solid.yellow.700}",
- "400": "{colors.solid.yellow.600}",
- "500": "{colors.solid.yellow.500}",
- "600": "{colors.solid.yellow.400}",
- "700": "{colors.solid.yellow.300}",
- "800": "{colors.solid.yellow.200}",
- "900": "{colors.solid.yellow.100}",
- "950": "{colors.solid.yellow.50}"
- },
- "transparent": "rgba(0, 0, 0, 0.0001)",
- "help": {
- "50": "{colors.solid.purple.950}",
- "100": "{colors.solid.purple.900}",
- "200": "{colors.solid.purple.800}",
- "300": "{colors.solid.purple.700}",
- "400": "{colors.solid.purple.600}",
- "500": "{colors.solid.purple.500}",
- "600": "{colors.solid.purple.400}",
- "700": "{colors.solid.purple.300}",
- "800": "{colors.solid.purple.200}",
- "900": "{colors.solid.purple.100}",
- "950": "{colors.solid.purple.50}"
- },
- "error": {
- "50": "{colors.solid.red.950}",
- "100": "{colors.solid.red.900}",
- "200": "{colors.solid.red.800}",
- "300": "{colors.solid.red.700}",
- "400": "{colors.solid.red.600}",
- "500": "{colors.solid.red.500}",
- "600": "{colors.solid.red.400}",
- "700": "{colors.solid.red.300}",
- "800": "{colors.solid.red.200}",
- "900": "{colors.solid.red.100}",
- "950": "{colors.solid.red.50}"
- },
- "surface": {
- "0": "{colors.alpha.black.100}",
- "50": "{colors.solid.zinc.950}",
- "100": "{colors.solid.zinc.900}",
- "200": "{colors.solid.zinc.800}",
- "300": "{colors.solid.zinc.700}",
- "400": "{colors.solid.zinc.600}",
- "500": "{colors.solid.zinc.500}",
- "600": "{colors.solid.zinc.400}",
- "700": "{colors.solid.zinc.300}",
- "800": "{colors.solid.zinc.200}",
- "900": "{colors.solid.zinc.100}",
- "950": "{colors.solid.zinc.50}"
- },
- "primary": {
- "color": "{primary.500}",
- "contrastColor": "{colors.solid.zinc.900}",
- "hoverColor": "{primary.400}",
- "activeColor": "{primary.300}"
- },
- "highlight": {
- "background": "{colors.solid.zinc.100}",
- "focusBackground": "{colors.solid.zinc.200}",
- "color": "{colors.solid.zinc.900}",
- "focusColor": "{colors.solid.zinc.900}"
- },
- "focusRing": {
- "shadow": "0 0 0 0.2rem {primary.800}",
- "extend": {
- "invalid": "{colors.solid.red.800}",
- "success": "{colors.solid.green.800}",
- "warning": "{colors.solid.yellow.800}",
- "info": "{colors.solid.blue.800}"
- }
- },
- "mask": {
- "background": "{colors.alpha.black.60}",
- "color": "{surface.800}"
- },
- "formField": {
- "background": "{colors.solid.zinc.950}",
- "disabledBackground": "{colors.solid.zinc.800}",
- "readonlyBackground": "{colors.solid.zinc.900}",
- "filledBackground": "{colors.solid.zinc.950}",
- "filledHoverBackground": "{colors.solid.zinc.950}",
- "filledFocusBackground": "{colors.solid.zinc.950}",
- "borderColor": "{colors.solid.zinc.700}",
- "hoverBorderPrimaryColor": "{colors.solid.zinc.100}",
- "focusBorderPrimaryColor": "{colors.solid.zinc.100}",
- "hoverBorderSecondaryColor": "{colors.solid.green.400}",
- "focusBorderSecondaryColor": "{colors.solid.green.400}",
- "invalidBorderColor": "{colors.solid.red.600}",
- "color": "{colors.alpha.white.100}",
- "disabledColor": "{colors.solid.zinc.500}",
- "placeholderColor": "{colors.solid.zinc.500}",
- "invalidPlaceholderColor": "{colors.solid.red.400}",
- "floatLabelColor": "{colors.solid.zinc.500}",
- "floatLabelFocusColor": "{colors.solid.zinc.500}",
- "floatLabelActiveColor": "{colors.solid.zinc.500}",
- "floatLabelInvalidColor": "{formField.invalidPlaceholderColor}",
- "iconColor": "{colors.alpha.white.100}",
- "shadow": "rgba(255, 255, 255, 0.0000)",
- "backgroundHandler": "{colors.alpha.white.100}"
- },
- "text": {
- "color": "{colors.alpha.white.100}",
- "extend": {
- "colorPrimaryStatic": "{colors.solid.zinc.900}",
- "colorSecondaryStatic": "{colors.alpha.white.100}",
- "colorInverted": "{colors.solid.zinc.900}"
- },
- "hoverColor": "{colors.solid.zinc.300}",
- "mutedColor": "{colors.solid.zinc.500}",
- "hoverMutedColor": "{colors.solid.zinc.700}"
- },
- "content": {
- "background": "{colors.solid.zinc.900}",
- "hoverBackground": "{colors.solid.zinc.800}",
- "borderColor": "{colors.solid.zinc.800}",
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}"
- },
- "overlay": {
- "select": {
- "background": "{colors.solid.zinc.900}",
- "borderColor": "{colors.solid.zinc.800}",
- "color": "{text.color}"
- },
- "popover": {
- "background": "{colors.solid.zinc.900}",
- "borderColor": "{formField.borderColor}",
- "color": "{text.color}",
- "shadow": "rgba(24, 26, 31, 0.2000)"
- },
- "modal": {
- "background": "{colors.solid.zinc.900}",
- "borderColor": "{colors.solid.zinc.800}",
- "color": "{text.color}"
- }
- },
- "list": {
- "option": {
- "background": "{colors.solid.zinc.900}",
- "focusBackground": "{colors.solid.zinc.800}",
- "selectedBackground": "{colors.solid.zinc.100}",
- "selectedFocusBackground": "{colors.solid.zinc.300}",
- "color": "{text.color}",
- "focusColor": "{text.color}",
- "selectedColor": "{text.extend.colorInverted}",
- "selectedFocusColor": "{text.extend.colorInverted}",
- "icon": {
- "color": "{text.color}",
- "focusColor": "{text.color}"
- }
- },
- "surface": "#ffffff",
- "optionGroup": {
- "background": "{colors.solid.zinc.900}",
- "color": "{text.mutedColor}"
- }
- },
- "navigation": {
- "submenuLabel": {
- "background": "rgba(255, 255, 255, 0.0000)",
- "color": "{text.mutedColor}"
- },
- "submenuIcon": {
- "color": "{colors.solid.zinc.100}",
- "focusColor": "{colors.solid.zinc.100}",
- "activeColor": "{colors.solid.zinc.900}"
- },
- "item": {
- "focusBackground": "{colors.solid.zinc.900}",
- "activeBackground": "{colors.solid.zinc.100}",
- "color": "{colors.alpha.white.100}",
- "focusColor": "{colors.alpha.white.100}",
- "activeColor": "{colors.solid.zinc.900}",
- "icon": {
- "color": "{colors.alpha.white.100}",
- "focusColor": "{colors.alpha.white.100}",
- "activeColor": "{colors.solid.zinc.900}"
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/prime-preset/tokens/theme-light.json b/src/prime-preset/tokens/theme-light.json
deleted file mode 100644
index d06ada7..0000000
--- a/src/prime-preset/tokens/theme-light.json
+++ /dev/null
@@ -1,212 +0,0 @@
-{
- "success": {
- "50": "{colors.solid.green.50}",
- "100": "{colors.solid.green.100}",
- "200": "{colors.solid.green.200}",
- "300": "{colors.solid.green.300}",
- "400": "{colors.solid.green.400}",
- "500": "{colors.solid.green.500}",
- "600": "{colors.solid.green.600}",
- "700": "{colors.solid.green.700}",
- "800": "{colors.solid.green.800}",
- "900": "{colors.solid.green.900}",
- "950": "{colors.solid.green.950}"
- },
- "info": {
- "50": "{colors.solid.blue.50}",
- "100": "{colors.solid.blue.100}",
- "200": "{colors.solid.blue.200}",
- "300": "{colors.solid.blue.300}",
- "400": "{colors.solid.blue.400}",
- "500": "{colors.solid.blue.500}",
- "600": "{colors.solid.blue.600}",
- "700": "{colors.solid.blue.700}",
- "800": "{colors.solid.blue.800}",
- "900": "{colors.solid.blue.900}",
- "950": "{colors.solid.blue.950}"
- },
- "warn": {
- "50": "{colors.solid.yellow.50}",
- "100": "{colors.solid.yellow.100}",
- "200": "{colors.solid.yellow.200}",
- "300": "{colors.solid.yellow.300}",
- "400": "{colors.solid.yellow.400}",
- "500": "{colors.solid.yellow.500}",
- "600": "{colors.solid.yellow.600}",
- "700": "{colors.solid.yellow.700}",
- "800": "{colors.solid.yellow.800}",
- "900": "{colors.solid.yellow.900}",
- "950": "{colors.solid.yellow.950}"
- },
- "transparent": "rgba(255, 255, 255, 0.0001)",
- "help": {
- "50": "{colors.solid.purple.50}",
- "100": "{colors.solid.purple.100}",
- "200": "{colors.solid.purple.200}",
- "300": "{colors.solid.purple.300}",
- "400": "{colors.solid.purple.400}",
- "500": "{colors.solid.purple.500}",
- "600": "{colors.solid.purple.600}",
- "700": "{colors.solid.purple.700}",
- "800": "{colors.solid.purple.800}",
- "900": "{colors.solid.purple.900}",
- "950": "{colors.solid.purple.950}"
- },
- "error": {
- "50": "{colors.solid.red.50}",
- "100": "{colors.solid.red.100}",
- "200": "{colors.solid.red.200}",
- "300": "{colors.solid.red.300}",
- "400": "{colors.solid.red.400}",
- "500": "{colors.solid.red.500}",
- "600": "{colors.solid.red.600}",
- "700": "{colors.solid.red.700}",
- "800": "{colors.solid.red.800}",
- "900": "{colors.solid.red.900}",
- "950": "{colors.solid.red.950}"
- },
- "surface": {
- "0": "{colors.alpha.white.100}",
- "50": "{colors.solid.zinc.50}",
- "100": "{colors.solid.zinc.100}",
- "200": "{colors.solid.zinc.200}",
- "300": "{colors.solid.zinc.300}",
- "400": "{colors.solid.zinc.400}",
- "500": "{colors.solid.zinc.500}",
- "600": "{colors.solid.zinc.600}",
- "700": "{colors.solid.zinc.700}",
- "800": "{colors.solid.zinc.800}",
- "900": "{colors.solid.zinc.900}",
- "950": "{colors.solid.zinc.950}"
- },
- "primary": {
- "color": "{primary.500}",
- "contrastColor": "{surface.0}",
- "hoverColor": "{primary.600}",
- "activeColor": "{primary.700}"
- },
- "highlight": {
- "background": "{colors.solid.zinc.900}",
- "focusBackground": "{colors.solid.zinc.800}",
- "color": "{colors.alpha.white.100}",
- "focusColor": "{colors.alpha.white.100}"
- },
- "focusRing": {
- "shadow": "0 0 0 0.2rem {primary.200}",
- "extend": {
- "invalid": "{colors.solid.red.200}",
- "success": "{colors.solid.green.200}",
- "warning": "{colors.solid.yellow.200}",
- "info": "{colors.solid.blue.200}"
- }
- },
- "mask": {
- "background": "{colors.alpha.black.40}",
- "color": "{surface.200}"
- },
- "formField": {
- "background": "{colors.alpha.white.100}",
- "disabledBackground": "{colors.solid.zinc.200}",
- "readonlyBackground": "{colors.solid.zinc.100}",
- "filledBackground": "{colors.alpha.white.100}",
- "filledHoverBackground": "{colors.alpha.white.100}",
- "filledFocusBackground": "{colors.alpha.white.100}",
- "borderColor": "{colors.solid.zinc.300}",
- "hoverBorderPrimaryColor": "{colors.solid.zinc.900}",
- "focusBorderPrimaryColor": "{colors.solid.zinc.900}",
- "hoverBorderSecondaryColor": "{colors.solid.green.600}",
- "focusBorderSecondaryColor": "{colors.solid.green.600}",
- "invalidBorderColor": "{colors.solid.red.400}",
- "color": "{colors.solid.zinc.950}",
- "disabledColor": "{colors.solid.zinc.500}",
- "placeholderColor": "{colors.solid.zinc.500}",
- "invalidPlaceholderColor": "{colors.solid.red.600}",
- "floatLabelColor": "{colors.solid.zinc.500}",
- "floatLabelFocusColor": "{colors.solid.zinc.500}",
- "floatLabelActiveColor": "{colors.solid.zinc.500}",
- "floatLabelInvalidColor": "{formField.invalidPlaceholderColor}",
- "iconColor": "{colors.solid.zinc.950}",
- "shadow": "rgba(0, 0, 0, 0.0000)",
- "backgroundHandler": "{colors.alpha.white.100}"
- },
- "text": {
- "color": "{colors.solid.zinc.900}",
- "extend": {
- "colorPrimaryStatic": "{colors.solid.zinc.900}",
- "colorSecondaryStatic": "{colors.alpha.white.100}",
- "colorInverted": "{colors.alpha.white.100}"
- },
- "hoverColor": "{colors.solid.zinc.700}",
- "mutedColor": "{colors.solid.zinc.500}",
- "hoverMutedColor": "{colors.solid.zinc.300}"
- },
- "content": {
- "background": "{colors.alpha.white.100}",
- "hoverBackground": "{colors.solid.zinc.100}",
- "borderColor": "{colors.solid.zinc.200}",
- "color": "{text.color}",
- "hoverColor": "{text.hoverColor}"
- },
- "overlay": {
- "select": {
- "background": "{colors.alpha.white.100}",
- "borderColor": "{colors.solid.zinc.200}",
- "color": "{text.color}"
- },
- "popover": {
- "background": "{colors.alpha.white.100}",
- "borderColor": "{formField.borderColor}",
- "color": "{text.color}",
- "shadow": "rgba(24, 26, 31, 0.2000)"
- },
- "modal": {
- "background": "{colors.alpha.white.100}",
- "borderColor": "{colors.solid.zinc.200}",
- "color": "{text.color}"
- }
- },
- "list": {
- "option": {
- "background": "{colors.alpha.white.100}",
- "focusBackground": "{colors.solid.zinc.100}",
- "selectedBackground": "{colors.solid.zinc.900}",
- "selectedFocusBackground": "{colors.solid.zinc.700}",
- "color": "{text.color}",
- "focusColor": "{text.color}",
- "selectedColor": "{text.extend.colorInverted}",
- "selectedFocusColor": "{text.extend.colorInverted}",
- "icon": {
- "color": "{text.color}",
- "focusColor": "{text.color}"
- }
- },
- "surface": "#ffffff",
- "optionGroup": {
- "background": "{colors.alpha.white.100}",
- "color": "{text.mutedColor}"
- }
- },
- "navigation": {
- "submenuLabel": {
- "background": "rgba(255, 255, 255, 0.0000)",
- "color": "{text.mutedColor}"
- },
- "submenuIcon": {
- "color": "{colors.solid.zinc.900}",
- "focusColor": "{colors.solid.zinc.900}",
- "activeColor": "{colors.alpha.white.100}"
- },
- "item": {
- "focusBackground": "{colors.solid.zinc.100}",
- "activeBackground": "{colors.solid.zinc.900}",
- "color": "{colors.solid.zinc.900}",
- "focusColor": "{colors.solid.zinc.900}",
- "activeColor": "{colors.alpha.white.100}",
- "icon": {
- "color": "{colors.solid.zinc.900}",
- "focusColor": "{colors.solid.zinc.900}",
- "activeColor": "{colors.alpha.white.100}"
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/stories/components/button/button.stories.ts b/src/stories/components/button/button.stories.ts
index 80c1166..e84c0cc 100644
--- a/src/stories/components/button/button.stories.ts
+++ b/src/stories/components/button/button.stories.ts
@@ -1,48 +1,421 @@
-import { Meta, moduleMetadata } from '@storybook/angular';
-
-import { ButtonModule } from 'primeng/button';
-
-import { ButtonBaseComponent, Base } from './examples/button-base.component';
-import { ButtonSizesComponent, Sizes } from './examples/button-sizes.component';
-import { ButtonRoundedComponent, Rounded } from './examples/button-rounded.component';
-import { ButtonOutlinedComponent, Outlined } from './examples/button-outlined.component';
-import { ButtonTextComponent, Text } from './examples/button-text.component';
-import { ButtonIconComponent, Icon } from './examples/button-icon.component';
-import { ButtonDisabledComponent, Disabled } from './examples/button-disabled.component';
-import { ButtonLoadingComponent, Loading } from './examples/button-loading.component';
-import { ButtonBadgeComponent, Badge } from './examples/button-badge.component';
-import { ButtonSeverityComponent, Severity } from './examples/button-severity.component';
-import { CommonModule } from '@angular/common';
-
-const meta: Meta = {
- title: 'PrimeNG/Button',
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { ExtraButtonComponent } from '../../../components/button/button-extra.component';
+
+
+const meta: Meta = {
+ title: 'Prime/Button',
+ component: ExtraButtonComponent,
tags: ['autodocs'],
decorators: [
moduleMetadata({
- imports: [
- CommonModule,
- ButtonModule,
- ButtonBaseComponent,
- ButtonSizesComponent,
- ButtonRoundedComponent,
- ButtonOutlinedComponent,
- ButtonTextComponent,
- ButtonIconComponent,
- ButtonDisabledComponent,
- ButtonLoadingComponent,
- ButtonBadgeComponent,
- ButtonSeverityComponent
- ]
+ imports: [ExtraButtonComponent]
})
],
parameters: {
docs: {
description: {
- component: 'Компонент кнопки с различными стилями, состояниями и иконками'
- }
- }
- }
+ component:
+ 'Кнопка — базовый интерактивный элемент. [Figma Design](https://www.figma.com/design/HOLKdvQJ8jCLeX17s9d0Yf/UI-Kit--DS--v2.0?node-id=160-5223)',
+ },
+ },
+ },
+ argTypes: {
+ label: {
+ control: 'text',
+ description: 'Текст кнопки',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'Button' },
+ type: { summary: 'string' },
+ },
+ },
+ variant: {
+ control: 'select',
+ options: ['primary', 'secondary', 'outlined', 'text', 'link'],
+ description: 'Вариант отображения кнопки',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'primary' },
+ type: { summary: "'primary' | 'secondary' | 'outlined' | 'text' | 'link'" },
+ },
+ },
+ severity: {
+ control: 'select',
+ options: [null, 'success', 'info', 'warning', 'danger'],
+ description: 'Семантический вариант кнопки',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'null' },
+ type: { summary: "'success' | 'info' | 'warning' | 'danger' | null" },
+ },
+ },
+ size: {
+ control: 'select',
+ options: ['small', 'base', 'large', 'xlarge'],
+ description: 'Размер кнопки',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'base' },
+ type: { summary: "'small' | 'base' | 'large' | 'xlarge'" },
+ },
+ },
+ icon: {
+ control: 'text',
+ description: 'CSS-класс иконки (например: ti ti-check)',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: '' },
+ type: { summary: 'string' },
+ },
+ },
+ iconPos: {
+ control: 'select',
+ options: [null, 'prefix', 'postfix'],
+ description: 'Позиция иконки относительно текста',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'null' },
+ type: { summary: "'prefix' | 'postfix' | null" },
+ },
+ },
+ iconOnly: {
+ control: 'boolean',
+ description: 'Только иконка, без текста',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'false' },
+ type: { summary: 'boolean' },
+ },
+ },
+ rounded: {
+ control: 'boolean',
+ description: 'Скруглённая форма кнопки',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'false' },
+ type: { summary: 'boolean' },
+ },
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Отключённое состояние',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'false' },
+ type: { summary: 'boolean' },
+ },
+ },
+ loading: {
+ control: 'boolean',
+ description: 'Состояние загрузки с индикатором',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'false' },
+ type: { summary: 'boolean' },
+ },
+ },
+ badge: {
+ control: 'text',
+ description: 'Значение бейджа',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: '' },
+ type: { summary: 'string' },
+ },
+ },
+ badgeSeverity: {
+ control: 'select',
+ options: [null, 'success', 'info', 'warning', 'danger', 'secondary', 'contrast'],
+ description: 'Цветовая схема бейджа',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'null' },
+ type: { summary: "'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null" },
+ },
+ },
+ showBadge: {
+ control: 'boolean',
+ description: 'Показывать ли бейдж',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'false' },
+ type: { summary: 'boolean' },
+ },
+ },
+ fluid: {
+ control: 'boolean',
+ description: 'Растягивать ли кнопку на всю ширину контейнера',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'false' },
+ type: { summary: 'boolean' },
+ },
+ },
+ ariaLabel: {
+ control: 'text',
+ description: 'Метка для экранных дикторов',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'undefined' },
+ type: { summary: 'string' },
+ },
+ },
+ autofocus: {
+ control: 'boolean',
+ description: 'Автофокус при загрузке',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'false' },
+ type: { summary: 'boolean' },
+ },
+ },
+ tabindex: {
+ control: 'number',
+ description: 'Порядок фокуса',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'undefined' },
+ type: { summary: 'number' },
+ },
+ },
+ text: {
+ control: 'boolean',
+ description: 'Текстовый вариант кнопки',
+ table: {
+ category: 'Props',
+ defaultValue: { summary: 'false' },
+ type: { summary: 'boolean' },
+ },
+ },
+ },
+ args: {
+ showBadge: false,
+ badge: '',
+ badgeSeverity: null,
+ fluid: false,
+ autofocus: false,
+ text: false,
+ },
};
+
+const commonTemplate = `
+
+`;
+
export default meta;
+type Story = StoryObj;
+
+// ── Default ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+ name: 'Default',
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: {
+ label: 'Button',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
+ },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+// ── Stories ──────────────────────────────────────────────────────────────────
+
+export const Sizes: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { label: 'Button', size: 'large' },
+ parameters: {
+ docs: {
+ description: { story: 'Все доступные размеры: small, base, large, xlarge.' },
+ source: {
+ code: `
+
+
+
+`,
+ },
+ },
+ },
+};
+
+export const Icons: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { label: 'Button', icon: 'ti ti-check' },
+ parameters: {
+ docs: {
+ description: { story: 'Кнопки с иконками (префикс по умолчанию).' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const IconOnly: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { icon: 'ti ti-check', iconOnly: true },
+ parameters: {
+ docs: {
+ description: { story: 'Кнопки без текста, только с иконкой.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const Loading: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { label: 'Button', loading: true },
+ parameters: {
+ docs: {
+ description: { story: 'Состояние загрузки с индикатором.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const Rounded: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { label: 'Button', rounded: true },
+ parameters: {
+ docs: {
+ description: { story: 'Скруглённая форма кнопок.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const Text: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { label: 'Button', variant: 'text' },
+ parameters: {
+ docs: {
+ description: { story: 'Текстовый вариант кнопки (без заливки и границ).' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const Link: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { label: 'Link Button', variant: 'link' },
+ parameters: {
+ docs: {
+ description: { story: 'Кнопка в виде ссылки.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const Severity: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { label: 'Button', severity: 'success' },
+ parameters: {
+ docs: {
+ description: { story: 'Цветовые схемы для различных контекстов: success, info, warning, danger.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const Disabled: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: { label: 'Button', disabled: true },
+ parameters: {
+ docs: {
+ description: { story: 'Состояние кнопки, при котором взаимодействие заблокировано.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
+
+export const Badge: Story = {
+ render: (args) => ({
+ props: args,
+ template: commonTemplate,
+ }),
+ args: {
+ label: 'Emails',
+ badge: '8',
+ severity: 'success',
+ badgeSeverity: 'danger',
+ showBadge: true,
+ },
+ parameters: {
+ docs: {
+ description: { story: 'Примеры использования бейджей на кнопках с позиционированием в углу.' },
+ source: {
+ code: ``,
+ },
+ },
+ },
+};
-export { Base, Disabled, Loading, Sizes, Rounded, Outlined, Text, Icon, Badge, Severity };
diff --git a/src/stories/components/button/examples/button-extra.component.ts b/src/stories/components/button/examples/button-extra.component.ts
new file mode 100644
index 0000000..dfacded
--- /dev/null
+++ b/src/stories/components/button/examples/button-extra.component.ts
@@ -0,0 +1,109 @@
+import { StoryObj } from '@storybook/angular';
+
+export { ExtraButtonComponent } from '../../../../components/button/button-extra.component';
+
+export const Extra: StoryObj = {
+ render: (args) => ({
+ props: args,
+ template: `
+`
+ }),
+ args: {
+ label: 'Button',
+ showBadge: false,
+ fluid: false,
+ autofocus: false,
+ text: false
+ },
+ argTypes: {
+ label: { control: 'text' },
+ variant: {
+ control: 'select',
+ options: ['primary', 'secondary', 'outlined', 'text', 'link']
+ },
+ severity: {
+ control: 'select',
+ options: [null, 'success', 'warning', 'danger', 'info']
+ },
+ size: {
+ control: 'select',
+ options: ['small', 'base', 'large', 'xlarge']
+ },
+ rounded: { control: 'boolean' },
+ iconPos: {
+ control: 'select',
+ options: [null, 'prefix', 'postfix']
+ },
+ iconOnly: { control: 'boolean' },
+ icon: { control: 'text' },
+ disabled: { control: 'boolean' },
+ loading: { control: 'boolean' },
+ badge: { control: 'text' },
+ badgeSeverity: {
+ control: 'select',
+ options: [null, 'success', 'warning', 'danger', 'info', 'secondary', 'contrast']
+ },
+ showBadge: { control: 'boolean' },
+ fluid: { control: 'boolean' },
+ ariaLabel: { control: 'text' },
+ autofocus: { control: 'boolean' },
+ tabindex: { control: 'number' },
+ text: { control: 'boolean' }
+ },
+ parameters: {
+
+ docs: {
+ description: {
+ story: 'Интерактивный пример с пропсами, соответствующими Figma-компоненту Button.'
+ }
+ }
+ }
+};
+
+export const Badge: StoryObj = {
+ render: (args) => ({
+ props: args,
+ template: `
+`
+ }),
+ args: {
+ label: 'Emails',
+ badge: '8',
+ badgeSeverity: 'danger',
+ showBadge: true,
+ severity: 'success'
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Пример кнопки с бейджем для отображения уведомлений или счётчиков.'
+ }
+ }
+ }
+};
+
diff --git a/src/styles.scss b/src/styles.scss
index e6cb491..fae0382 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,3 +3,21 @@
@tailwind utilities;
@import '@tabler/icons-webfont/dist/tabler-icons.min.css';
+
+@font-face {
+ font-family: 'TT Fellows';
+ src: url('./assets/fonts/tt-fellows/TT_Fellows_Regular.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'TT Fellows';
+ src: url('./assets/fonts/tt-fellows/TT_Fellows_DemiBold.woff2') format('woff2');
+ font-weight: 600;
+ font-style: normal;
+}
+
+html {
+ font-size: 14px;
+}