@moderneinc/design-system-tokens 6.0.0-next.02da4a

package/dist/semantic-colors.d.ts

@@ -0,0 +1,494 @@
+/**
+ * Moderne Design System
+ * TypeScript declarations generated from Figma design tokens
+ * @generated
+ */
+
+export type Icons = {
+hoverBorder: 'var(--mod-icons-hover-border)';
+pressedBackground: 'var(--mod-icons-pressed-background)';
+inverse: 'var(--mod-icons-inverse)';
+hover: 'var(--mod-icons-hover)';
+hoverBackground: 'var(--mod-icons-hover-background)';
+disabled: 'var(--mod-icons-disabled)';
+placeholder: 'var(--mod-icons-placeholder)';
+pressed: 'var(--mod-icons-pressed)';
+utility: 'var(--mod-icons-utility)';
+default: 'var(--mod-icons-default)';
+active: 'var(--mod-icons-active)';
+};
+
+export declare const icons: Icons;
+
+export type Surfaces = {
+highlightBackground: 'var(--mod-surfaces-highlight-background)';
+activeHighlight: 'var(--mod-surfaces-active-highlight)';
+dataGrid: {
+header: 'var(--mod-surfaces-data-grid-header)';
+selected: 'var(--mod-surfaces-data-grid-selected)';
+selectedHover: 'var(--mod-surfaces-data-grid-selected-hover)';
+hover: 'var(--mod-surfaces-data-grid-hover)';
+default: 'var(--mod-surfaces-data-grid-default)';
+border: 'var(--mod-surfaces-data-grid-border)';
+borderStrong: 'var(--mod-surfaces-data-grid-border-strong)';
+stripe: 'var(--mod-surfaces-data-grid-stripe)';
+focused: 'var(--mod-surfaces-data-grid-focused)';
+pinned: 'var(--mod-surfaces-data-grid-pinned)';
+disabled: 'var(--mod-surfaces-data-grid-disabled)';
+background: 'var(--mod-surfaces-data-grid-background)';
+};
+toggleKnob: 'var(--mod-surfaces-toggle-knob)';
+page: 'var(--mod-surfaces-page)';
+card: 'var(--mod-surfaces-card)';
+cardHeader: 'var(--mod-surfaces-card-header)';
+tabActive: 'var(--mod-surfaces-tab-active)';
+listHover: 'var(--mod-surfaces-list-hover)';
+shadowNeutral: 'var(--mod-surfaces-shadow-neutral)';
+shadowPrimary: 'var(--mod-surfaces-shadow-primary)';
+tooltip: 'var(--mod-surfaces-tooltip)';
+scrim: 'var(--mod-surfaces-scrim)';
+tabSecondaryBackground: 'var(--mod-surfaces-tab-secondary-background)';
+snackbarDarkMode: 'var(--mod-surfaces-snackbar-dark-mode)';
+snackbarBrand: 'var(--mod-surfaces-snackbar-brand)';
+snackbarLightMode: 'var(--mod-surfaces-snackbar-light-mode)';
+white: 'var(--mod-surfaces-white)';
+black: 'var(--mod-surfaces-black)';
+};
+
+export declare const surfaces: Surfaces;
+
+export type Typography = {
+searchInputBackground: 'var(--mod-typography-search-input-background)';
+linkDefault: 'var(--mod-typography-link-default-legacy)';
+linkHover: 'var(--mod-typography-link-hover)';
+navigation: {
+search: {
+highlightText: 'var(--mod-typography-navigation-search-highlight-text)';
+highlightBackground: 'var(--mod-typography-navigation-search-highlight-background)';
+inputBackground: 'var(--mod-typography-navigation-search-input-background)';
+highlightBackgroundActive: 'var(--mod-typography-navigation-search-highlight-background-active)';
+};
+default: 'var(--mod-typography-navigation-default)';
+};
+linkWhite: 'var(--mod-typography-link-white-legacy)';
+linkWhiteHover: 'var(--mod-typography-link-white-hover)';
+tab: {
+disabled: 'var(--mod-typography-tab-disabled)';
+inactive: 'var(--mod-typography-tab-inactive)';
+active: 'var(--mod-typography-tab-active)';
+};
+tooltip: {
+secondary: 'var(--mod-typography-tooltip-secondary)';
+default: 'var(--mod-typography-tooltip-default)';
+};
+input: {
+placeholder: 'var(--mod-typography-input-placeholder)';
+default: 'var(--mod-typography-input-default)';
+label: 'var(--mod-typography-input-label)';
+helper: 'var(--mod-typography-input-helper)';
+};
+code: {
+primary: 'var(--mod-typography-code-primary)';
+secondary: 'var(--mod-typography-code-secondary)';
+};
+button: {
+disabled: 'var(--mod-typography-button-disabled)';
+};
+link: {
+primary: 'var(--mod-typography-link-primary)';
+disabled: 'var(--mod-typography-link-disabled)';
+default: 'var(--mod-typography-link-default)';
+white: 'var(--mod-typography-link-white)';
+};
+error: 'var(--mod-typography-error)';
+success: 'var(--mod-typography-success)';
+warning: 'var(--mod-typography-warning)';
+legal: 'var(--mod-typography-legal)';
+bodySecondary: 'var(--mod-typography-body-secondary)';
+body: 'var(--mod-typography-body)';
+};
+
+export declare const typography: Typography;
+
+export type Border = {
+overlay: 'var(--mod-border-overlay)';
+subtle: 'var(--mod-border-subtle)';
+strong: 'var(--mod-border-strong)';
+hairline: 'var(--mod-border-hairline)';
+primary: 'var(--mod-border-primary)';
+secondary: 'var(--mod-border-secondary)';
+focus: 'var(--mod-border-focus)';
+};
+
+export declare const border: Border;
+
+export type Status = {
+active: {
+dark: 'var(--mod-status-active-dark)';
+default: 'var(--mod-status-active-default)';
+light: 'var(--mod-status-active-light)';
+transparent: 'var(--mod-status-active-transparent)';
+border: 'var(--mod-status-active-border)';
+};
+queued: {
+dark: 'var(--mod-status-queued-dark)';
+default: 'var(--mod-status-queued-default)';
+light: 'var(--mod-status-queued-light)';
+transparent: 'var(--mod-status-queued-transparent)';
+border: 'var(--mod-status-queued-border-nested)';
+};
+canceled: {
+dark: 'var(--mod-status-canceled-dark)';
+default: 'var(--mod-status-canceled-default)';
+light: 'var(--mod-status-canceled-light)';
+transparent: 'var(--mod-status-canceled-transparent)';
+border: 'var(--mod-status-canceled-border)';
+};
+success: {
+border: 'var(--mod-status-success-border-nested)';
+light: 'var(--mod-status-success-light)';
+default: 'var(--mod-status-success-default)';
+transparent: 'var(--mod-status-success-transparent)';
+dark: 'var(--mod-status-success-dark)';
+};
+error: {
+border: 'var(--mod-status-error-border-nested)';
+light: 'var(--mod-status-error-light)';
+default: 'var(--mod-status-error-default)';
+transparent: 'var(--mod-status-error-transparent)';
+dark: 'var(--mod-status-error-dark)';
+};
+warning: {
+border: 'var(--mod-status-warning-border-nested)';
+light: 'var(--mod-status-warning-light)';
+default: 'var(--mod-status-warning-default)';
+transparent: 'var(--mod-status-warning-transparent)';
+dark: 'var(--mod-status-warning-dark)';
+};
+info: {
+border: 'var(--mod-status-info-border)';
+dark: 'var(--mod-status-info-dark)';
+default: 'var(--mod-status-info-default)';
+light: 'var(--mod-status-info-light)';
+transparent: 'var(--mod-status-info-transparent)';
+};
+neutral: {
+border: 'var(--mod-status-neutral-border)';
+dark: 'var(--mod-status-neutral-dark)';
+default: 'var(--mod-status-neutral-default)';
+light: 'var(--mod-status-neutral-light)';
+transparent: 'var(--mod-status-neutral-transparent)';
+};
+successText: 'var(--mod-status-success-text)';
+successTint: 'var(--mod-status-success-tint)';
+successBorder: 'var(--mod-status-success-border)';
+errorText: 'var(--mod-status-error-text)';
+errorTint: 'var(--mod-status-error-tint)';
+errorBorder: 'var(--mod-status-error-border)';
+warningText: 'var(--mod-status-warning-text)';
+warningTint: 'var(--mod-status-warning-tint)';
+warningBorder: 'var(--mod-status-warning-border)';
+queuedTint: 'var(--mod-status-queued-tint)';
+queuedBorder: 'var(--mod-status-queued-border)';
+};
+
+export declare const status: Status;
+
+export type Link = {
+default: 'var(--mod-link-default)';
+hover: 'var(--mod-link-hover)';
+tint: 'var(--mod-link-tint)';
+tintBorder: 'var(--mod-link-tint-border)';
+};
+
+export declare const link: Link;
+
+export type Control = {
+border: 'var(--mod-control-border)';
+borderSelected: 'var(--mod-control-border-selected)';
+glyph: 'var(--mod-control-glyph)';
+checkedBg: 'var(--mod-control-checked-bg)';
+checkedFg: 'var(--mod-control-checked-fg)';
+};
+
+export declare const control: Control;
+
+export type Progress = {
+track: 'var(--mod-progress-track)';
+fill: 'var(--mod-progress-fill)';
+label: 'var(--mod-progress-label)';
+};
+
+export declare const progress: Progress;
+
+export type Illustration = {
+panel: 'var(--mod-illustration-panel)';
+stroke: 'var(--mod-illustration-stroke)';
+strokeMuted: 'var(--mod-illustration-stroke-muted)';
+inset: 'var(--mod-illustration-inset)';
+accent: 'var(--mod-illustration-accent)';
+positive: 'var(--mod-illustration-positive)';
+};
+
+export declare const illustration: Illustration;
+
+export type Dataviz = {
+categorical: {
+coral: 'var(--mod-dataviz-categorical-coral)';
+orange: 'var(--mod-dataviz-categorical-orange)';
+tangerine: 'var(--mod-dataviz-categorical-tangerine)';
+gold: 'var(--mod-dataviz-categorical-gold)';
+green: 'var(--mod-dataviz-categorical-green)';
+periwinkle: 'var(--mod-dataviz-categorical-periwinkle)';
+teal: 'var(--mod-dataviz-categorical-teal)';
+lilac: 'var(--mod-dataviz-categorical-lilac)';
+magenta: 'var(--mod-dataviz-categorical-magenta)';
+lime: 'var(--mod-dataviz-categorical-lime)';
+};
+boundary: {
+coral: 'var(--mod-dataviz-boundary-coral)';
+orange: 'var(--mod-dataviz-boundary-orange)';
+tangerine: 'var(--mod-dataviz-boundary-tangerine)';
+gold: 'var(--mod-dataviz-boundary-gold)';
+green: 'var(--mod-dataviz-boundary-green)';
+na: 'var(--mod-dataviz-boundary-na)';
+periwinkle: 'var(--mod-dataviz-boundary-periwinkle)';
+teal: 'var(--mod-dataviz-boundary-teal)';
+lilac: 'var(--mod-dataviz-boundary-lilac)';
+magenta: 'var(--mod-dataviz-boundary-magenta)';
+lime: 'var(--mod-dataviz-boundary-lime)';
+};
+na: 'var(--mod-dataviz-na)';
+grid: 'var(--mod-dataviz-grid)';
+};
+
+export declare const dataviz: Dataviz;
+
+export type Toast = {
+successText: 'var(--mod-toast-success-text)';
+successBg: 'var(--mod-toast-success-bg)';
+successBorder: 'var(--mod-toast-success-border)';
+warningText: 'var(--mod-toast-warning-text)';
+warningBg: 'var(--mod-toast-warning-bg)';
+warningBorder: 'var(--mod-toast-warning-border)';
+errorText: 'var(--mod-toast-error-text)';
+errorBg: 'var(--mod-toast-error-bg)';
+errorBorder: 'var(--mod-toast-error-border)';
+infoText: 'var(--mod-toast-info-text)';
+infoBg: 'var(--mod-toast-info-bg)';
+infoBorder: 'var(--mod-toast-info-border)';
+};
+
+export declare const toast: Toast;
+
+export type Surface = {
+canvasChrome: 'var(--mod-surface-canvas-chrome)';
+canvasContent: 'var(--mod-surface-canvas-content)';
+field: 'var(--mod-surface-field)';
+sunken: 'var(--mod-surface-sunken)';
+sunken2: 'var(--mod-surface-sunken2)';
+rowHover: 'var(--mod-surface-row-hover)';
+scrim: 'var(--mod-surface-scrim)';
+tooltip: 'var(--mod-surface-tooltip)';
+cardFrosted: 'var(--mod-surface-card-frosted)';
+};
+
+export declare const surface: Surface;
+
+export type Text = {
+primary: 'var(--mod-text-primary)';
+muted: 'var(--mod-text-muted)';
+link: 'var(--mod-text-link)';
+tabActive: 'var(--mod-text-tab-active)';
+onPrimary: 'var(--mod-text-on-primary)';
+codePrimary: 'var(--mod-text-code-primary)';
+codeSecondary: 'var(--mod-text-code-secondary)';
+inputPlaceholder: 'var(--mod-text-input-placeholder)';
+};
+
+export declare const text: Text;
+
+export type Button = {
+primaryBg: 'var(--mod-button-primary-bg)';
+primaryFg: 'var(--mod-button-primary-fg)';
+primaryBgHover: 'var(--mod-button-primary-bg-hover)';
+destructiveBg: 'var(--mod-button-destructive-bg)';
+destructiveBgHover: 'var(--mod-button-destructive-bg-hover)';
+};
+
+export declare const button: Button;
+
+export type Data = {
+periwinkle: 'var(--mod-data-periwinkle)';
+teal: 'var(--mod-data-teal)';
+lilac: 'var(--mod-data-lilac)';
+coral: 'var(--mod-data-coral)';
+green: 'var(--mod-data-green)';
+yellow: 'var(--mod-data-yellow)';
+orange1: 'var(--mod-data-orange1)';
+orange2: 'var(--mod-data-orange2)';
+orange3: 'var(--mod-data-orange3)';
+red1: 'var(--mod-data-red1)';
+red2: 'var(--mod-data-red2)';
+red3: 'var(--mod-data-red3)';
+};
+
+export declare const data: Data;
+
+export type Skeleton = {
+background: 'var(--mod-skeleton-background)';
+wave: 'var(--mod-skeleton-wave)';
+};
+
+export declare const skeleton: Skeleton;
+
+export type Accent = {
+default: 'var(--mod-accent-default)';
+deep: 'var(--mod-accent-deep)';
+tint: 'var(--mod-accent-tint)';
+border: 'var(--mod-accent-border)';
+primaryFg: 'var(--mod-accent-primary-fg)';
+glow: 'var(--mod-accent-glow)';
+glowSecondary: 'var(--mod-accent-glow-secondary)';
+};
+
+export declare const accent: Accent;
+
+export type Role = {
+violetBorder: 'var(--mod-role-violet-border)';
+magentaTint: 'var(--mod-role-magenta-tint)';
+magentaText: 'var(--mod-role-magenta-text)';
+magentaBorder: 'var(--mod-role-magenta-border)';
+tealTint: 'var(--mod-role-teal-tint)';
+tealText: 'var(--mod-role-teal-text)';
+tealBorder: 'var(--mod-role-teal-border)';
+violetTint: 'var(--mod-role-violet-tint)';
+violetText: 'var(--mod-role-violet-text)';
+};
+
+export declare const role: Role;
+
+export type Avatar = {
+userDefaultBg: 'var(--mod-avatar-user-default-bg)';
+userDefaultText: 'var(--mod-avatar-user-default-text)';
+initials: {
+text1: 'var(--mod-avatar-initials-text1)';
+text2: 'var(--mod-avatar-initials-text2)';
+text3: 'var(--mod-avatar-initials-text3)';
+text4: 'var(--mod-avatar-initials-text4)';
+text5: 'var(--mod-avatar-initials-text5)';
+text6: 'var(--mod-avatar-initials-text6)';
+text7: 'var(--mod-avatar-initials-text7)';
+border1: 'var(--mod-avatar-initials-border1)';
+border2: 'var(--mod-avatar-initials-border2)';
+border3: 'var(--mod-avatar-initials-border3)';
+border4: 'var(--mod-avatar-initials-border4)';
+border5: 'var(--mod-avatar-initials-border5)';
+border6: 'var(--mod-avatar-initials-border6)';
+border7: 'var(--mod-avatar-initials-border7)';
+background1: 'var(--mod-avatar-initials-background1)';
+background2: 'var(--mod-avatar-initials-background2)';
+background3: 'var(--mod-avatar-initials-background3)';
+background4: 'var(--mod-avatar-initials-background4)';
+background5: 'var(--mod-avatar-initials-background5)';
+background6: 'var(--mod-avatar-initials-background6)';
+background7: 'var(--mod-avatar-initials-background7)';
+};
+};
+
+export declare const avatar: Avatar;
+
+export type Input = {
+radio: 'var(--mod-input-radio)';
+checkbox: 'var(--mod-input-checkbox)';
+hoverBackground: 'var(--mod-input-hover-background)';
+background: 'var(--mod-input-background)';
+disabledBackground: 'var(--mod-input-disabled-background)';
+};
+
+export declare const input: Input;
+
+export type Buttons = {
+primary: {
+hover: 'var(--mod-buttons-primary-hover)';
+disabled: 'var(--mod-buttons-primary-disabled)';
+pressed: 'var(--mod-buttons-primary-pressed)';
+default: 'var(--mod-buttons-primary-default)';
+};
+secondary: {
+defaultBorder: 'var(--mod-buttons-secondary-default-border)';
+hoverBackground: 'var(--mod-buttons-secondary-hover-background)';
+pressedBackground: 'var(--mod-buttons-secondary-pressed-background)';
+disabledBackground: 'var(--mod-buttons-secondary-disabled-background)';
+defaultBackground: 'var(--mod-buttons-secondary-default-background)';
+default: 'var(--mod-buttons-secondary-default)';
+};
+tertiary: {
+default: 'var(--mod-buttons-tertiary-default)';
+hover: 'var(--mod-buttons-tertiary-hover)';
+pressed: 'var(--mod-buttons-tertiary-pressed)';
+disabled: 'var(--mod-buttons-tertiary-disabled)';
+};
+destructive: 'var(--mod-buttons-destructive)';
+navigation: {
+active: 'var(--mod-buttons-navigation-active)';
+defaultBorder: 'var(--mod-buttons-navigation-default-border)';
+hoverBackground: 'var(--mod-buttons-navigation-hover-background)';
+pressedBackground: 'var(--mod-buttons-navigation-pressed-background)';
+activeBorder: 'var(--mod-buttons-navigation-active-border)';
+};
+};
+
+export declare const buttons: Buttons;
+
+export type Activity = {
+recipeRun: 'var(--mod-activity-recipe-run)';
+commitJob: 'var(--mod-activity-commit-job)';
+visualization: 'var(--mod-activity-visualization)';
+};
+
+export declare const activity: Activity;
+
+export type Tab = {
+secondaryBackground: 'var(--mod-tab-secondary-background)';
+};
+
+export declare const tab: Tab;
+
+export type Code = {
+background: 'var(--mod-code-background)';
+};
+
+export declare const code: Code;
+
+export declare const brand: 'var(--mod-brand)';
+
+declare const _default: {
+icons: typeof icons,
+surfaces: typeof surfaces,
+typography: typeof typography,
+border: typeof border,
+status: typeof status,
+link: typeof link,
+control: typeof control,
+progress: typeof progress,
+illustration: typeof illustration,
+dataviz: typeof dataviz,
+toast: typeof toast,
+surface: typeof surface,
+text: typeof text,
+button: typeof button,
+data: typeof data,
+skeleton: typeof skeleton,
+accent: typeof accent,
+role: typeof role,
+avatar: typeof avatar,
+input: typeof input,
+buttons: typeof buttons,
+activity: typeof activity,
+tab: typeof tab,
+code: typeof code,
+brand: typeof brand,
+};
+
+export default _default;