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

package/dist/semantic-colors-light.d.ts

@@ -0,0 +1,494 @@
+/**
+ * Moderne Design System
+ * TypeScript declarations generated from Figma design tokens
+ * @generated
+ */
+
+export type Icons = {
+hoverBorder: 'rgba(62, 123, 246, 0.3)';
+pressedBackground: 'rgba(62, 123, 246, 0.1)';
+inverse: '#f1f0ea';
+hover: '#1055e2';
+hoverBackground: 'rgba(62, 123, 246, 0.1)';
+disabled: 'rgba(35, 35, 66, 0.08)';
+placeholder: '#62627a';
+pressed: '#0046b5';
+utility: '#62627a';
+default: '#232342';
+active: '#0046b5';
+};
+
+export declare const icons: Icons;
+
+export type Surfaces = {
+highlightBackground: 'rgba(62, 123, 246, 0.1)';
+activeHighlight: 'rgba(182, 191, 255, 0.4)';
+dataGrid: {
+header: '#f2efe7';
+selected: 'rgba(62, 123, 246, 0.1)';
+selectedHover: 'rgba(62, 123, 246, 0.1)';
+hover: '#f4f2eb';
+default: '#fbfaf6';
+border: 'rgba(35, 35, 66, 0.12)';
+borderStrong: 'rgba(35, 35, 66, 0.5)';
+stripe: '#f4f2eb';
+focused: 'rgba(62, 123, 246, 0.1)';
+pinned: '#f2f0ea';
+disabled: '#edebe2';
+background: '#fbfaf6';
+};
+toggleKnob: '#fbfaf6';
+page: '#f2f0ea';
+card: '#fbfaf6';
+cardHeader: '#f2efe7';
+tabActive: '#fbfaf6';
+listHover: '#f4f2eb';
+shadowNeutral: 'rgba(31, 41, 55, 0.1)';
+shadowPrimary: 'rgba(47, 66, 255, 0.1)';
+tooltip: '#4b5563';
+scrim: 'rgba(31, 41, 55, 0.2)';
+tabSecondaryBackground: '#dfddd1';
+snackbarDarkMode: '#fbefed';
+snackbarBrand: '#131e7a';
+snackbarLightMode: '#eaf6ec';
+white: '#fbfaf6';
+black: '#17171c';
+};
+
+export declare const surfaces: Surfaces;
+
+export type Typography = {
+searchInputBackground: '#ffffff';
+linkDefault: '#0046b5';
+linkHover: '#2637e6';
+navigation: {
+search: {
+highlightText: '#1055e2';
+highlightBackground: 'rgba(47, 66, 255, 0)';
+inputBackground: '#f2f3ff';
+highlightBackgroundActive: '#dce0ff';
+};
+default: '#232342';
+};
+linkWhite: '#ffffff';
+linkWhiteHover: '#ffffff';
+tab: {
+disabled: '#6b7280';
+inactive: '#232342';
+active: '#1055e2';
+};
+tooltip: {
+secondary: '#62627a';
+default: '#ffffff';
+};
+input: {
+placeholder: '#6b7280';
+default: '#232342';
+label: '#232342';
+helper: '#62627a';
+};
+code: {
+primary: '#232342';
+secondary: '#62627a';
+};
+button: {
+disabled: '#6b7280';
+};
+link: {
+primary: '#0046b5';
+disabled: '#b6bfff';
+default: '#0046b5';
+white: '#ffffff';
+};
+error: '#c9291c';
+success: '#1d5937';
+warning: '#935b00';
+legal: '#9ca3af';
+bodySecondary: '#4d4d60';
+body: '#232342';
+};
+
+export declare const typography: Typography;
+
+export type Border = {
+overlay: 'rgba(255, 255, 255, 0)';
+subtle: 'rgba(35, 35, 66, 0.08)';
+strong: 'rgba(35, 35, 66, 0.5)';
+hairline: 'rgba(35, 35, 66, 0.12)';
+primary: 'rgba(35, 35, 66, 0.12)';
+secondary: 'rgba(35, 35, 66, 0.12)';
+focus: '#1055e2';
+};
+
+export declare const border: Border;
+
+export type Status = {
+active: {
+dark: '#5530a8';
+default: '#7048c8';
+light: '#ede8f8';
+transparent: 'rgba(85, 48, 168, 0.5)';
+border: '#c9bbea';
+};
+queued: {
+dark: '#7858c0';
+default: '#9472d4';
+light: '#f0ecf9';
+transparent: 'rgba(120, 88, 192, 0.5)';
+border: '#d2c6ed';
+};
+canceled: {
+dark: '#5c5040';
+default: '#7a6e5c';
+light: '#f2efea';
+transparent: 'rgba(92, 80, 64, 0.45)';
+border: '#d5cec3';
+};
+success: {
+border: '#bfe2c8';
+light: '#eef9f2';
+default: '#237341';
+transparent: 'rgba(29, 89, 55, 0.55)';
+dark: '#1d5937';
+};
+error: {
+border: '#f0b4ac';
+light: '#fbefed';
+default: '#d43c2a';
+transparent: 'rgba(201, 41, 28, 0.5)';
+dark: '#c9291c';
+};
+warning: {
+border: '#e6d9a8';
+light: '#fff1e0';
+default: '#b07210';
+transparent: 'rgba(147, 91, 0, 0.45)';
+dark: '#b68b12';
+};
+info: {
+border: '#c7d7f6';
+dark: '#1a4b8c';
+default: '#2668b5';
+light: '#e8f0fa';
+transparent: 'rgba(26, 75, 140, 0.5)';
+};
+neutral: {
+border: '#d1cfcb';
+dark: '#4a453e';
+default: '#706960';
+light: '#f0efed';
+transparent: 'rgba(74, 69, 62, 0.45)';
+};
+successText: '#1d5937';
+successTint: 'rgba(48, 242, 132, 0.15)';
+successBorder: 'rgba(29, 89, 55, 0.65)';
+errorText: '#c9291c';
+errorTint: '#fbefed';
+errorBorder: '#f0b4ac';
+warningText: '#b68b12';
+warningTint: 'rgba(255, 168, 61, 0.16)';
+warningBorder: 'rgba(147, 91, 0, 0.45)';
+queuedTint: 'rgba(157, 91, 232, 0.1)';
+queuedBorder: 'rgba(157, 91, 232, 0.35)';
+};
+
+export declare const status: Status;
+
+export type Link = {
+default: '#1055e2';
+hover: '#1055e2';
+tint: 'rgba(62, 123, 246, 0.1)';
+tintBorder: 'rgba(62, 123, 246, 0.3)';
+};
+
+export declare const link: Link;
+
+export type Control = {
+border: 'rgba(35, 35, 66, 0.5)';
+borderSelected: '#1055e2';
+glyph: '#1055e2';
+checkedBg: '#1055e2';
+checkedFg: '#ffffff';
+};
+
+export declare const control: Control;
+
+export type Progress = {
+track: 'rgba(62, 123, 246, 0.1)';
+fill: '#1055e2';
+label: '#1055e2';
+};
+
+export declare const progress: Progress;
+
+export type Illustration = {
+panel: '#fbfaf6';
+stroke: 'rgba(35, 35, 66, 0.5)';
+strokeMuted: '#62627a';
+inset: '#edebe2';
+accent: '#3e5be8';
+positive: '#1d5937';
+};
+
+export declare const illustration: Illustration;
+
+export type Dataviz = {
+categorical: {
+coral: '#ff6f61';
+orange: '#ff8f52';
+tangerine: '#ffa83d';
+gold: '#ffd34d';
+green: '#30f284';
+periwinkle: '#3e5be8';
+teal: '#25d0c0';
+lilac: '#b39deb';
+magenta: '#e6399b';
+lime: '#c7e84b';
+};
+boundary: {
+coral: '#a63325';
+orange: '#a34e14';
+tangerine: '#935b00';
+gold: '#806a00';
+green: '#1d5937';
+na: '#82806f';
+periwinkle: '#16306b';
+teal: '#0e4a45';
+lilac: '#3f1340';
+magenta: '#7a1e52';
+lime: '#4f5a12';
+};
+na: '#dedbd0';
+grid: 'rgba(35, 35, 66, 0.12)';
+};
+
+export declare const dataviz: Dataviz;
+
+export type Toast = {
+successText: '#1d5937';
+successBg: '#eaf6ec';
+successBorder: '#bfe2c8';
+warningText: '#8f6c0c';
+warningBg: '#faf4e1';
+warningBorder: '#e6d9a8';
+errorText: '#c9291c';
+errorBg: '#fbefed';
+errorBorder: '#f0b4ac';
+infoText: '#1055e2';
+infoBg: '#eef3fc';
+infoBorder: '#c7d7f6';
+};
+
+export declare const toast: Toast;
+
+export type Surface = {
+canvasChrome: '#f2f0ea';
+canvasContent: '#fbfaf6';
+field: '#fbfaf6';
+sunken: '#edebe2';
+sunken2: '#e4e1d6';
+rowHover: '#f4f2eb';
+scrim: 'rgba(35, 35, 66, 0.14)';
+tooltip: '#2d2d36';
+cardFrosted: 'rgba(251, 250, 246, 0.78)';
+};
+
+export declare const surface: Surface;
+
+export type Text = {
+primary: '#232342';
+muted: '#4d4d60';
+link: '#0046b5';
+tabActive: '#16306b';
+onPrimary: '#fbfaf6';
+codePrimary: '#1b2230';
+codeSecondary: '#62627a';
+inputPlaceholder: '#62627a';
+};
+
+export declare const text: Text;
+
+export type Button = {
+primaryBg: '#232342';
+primaryFg: '#fbfaf6';
+primaryBgHover: '#2c2c50';
+destructiveBg: '#c9291c';
+destructiveBgHover: '#a63325';
+};
+
+export declare const button: Button;
+
+export type Data = {
+periwinkle: '#3e5be8';
+teal: '#25d0c0';
+lilac: '#b39deb';
+coral: '#ff6f61';
+green: '#30f284';
+yellow: '#ffd34d';
+orange1: '#ffa83d';
+orange2: '#ff8f52';
+orange3: '#ff6f61';
+red1: '#fa826f';
+red2: '#c9291c';
+red3: '#a63325';
+};
+
+export declare const data: Data;
+
+export type Skeleton = {
+background: '#e4e1d6';
+wave: 'rgba(255, 255, 255, 0.5)';
+};
+
+export declare const skeleton: Skeleton;
+
+export type Accent = {
+default: '#1055e2';
+deep: '#16306b';
+tint: 'rgba(62, 123, 246, 0.1)';
+border: 'rgba(62, 123, 246, 0.3)';
+primaryFg: '#ffffff';
+glow: 'rgba(157, 91, 232, 0.13)';
+glowSecondary: 'rgba(230, 57, 155, 0.16)';
+};
+
+export declare const accent: Accent;
+
+export type Role = {
+violetBorder: 'rgba(157, 91, 232, 0.35)';
+magentaTint: 'rgba(230, 57, 155, 0.14)';
+magentaText: '#e6399b';
+magentaBorder: 'rgba(230, 57, 155, 0.4)';
+tealTint: 'rgba(14, 74, 69, 0.16)';
+tealText: '#0e4a45';
+tealBorder: 'rgba(14, 74, 69, 0.42)';
+violetTint: 'rgba(157, 91, 232, 0.1)';
+violetText: '#9d5be8';
+};
+
+export declare const role: Role;
+
+export type Avatar = {
+userDefaultBg: '#232342';
+userDefaultText: '#fbfaf6';
+initials: {
+text1: '#9d5be8';
+text2: '#1d5937';
+text3: '#935b00';
+text4: '#e6399b';
+text5: '#7a1e52';
+text6: '#0e4a45';
+text7: '#1055e2';
+border1: 'rgba(157, 91, 232, 0.35)';
+border2: 'rgba(48, 242, 132, 0.35)';
+border3: 'rgba(255, 168, 61, 0.35)';
+border4: 'rgba(230, 57, 155, 0.4)';
+border5: 'rgba(157, 91, 232, 0.35)';
+border6: 'rgba(14, 74, 69, 0.42)';
+border7: 'rgba(62, 123, 246, 0.35)';
+background1: 'rgba(157, 91, 232, 0.1)';
+background2: 'rgba(48, 242, 132, 0.1)';
+background3: 'rgba(255, 168, 61, 0.1)';
+background4: 'rgba(230, 57, 155, 0.14)';
+background5: 'rgba(157, 91, 232, 0.1)';
+background6: 'rgba(14, 74, 69, 0.16)';
+background7: 'rgba(62, 123, 246, 0.1)';
+};
+};
+
+export declare const avatar: Avatar;
+
+export type Input = {
+radio: '#0046b5';
+checkbox: '#0046b5';
+hoverBackground: '#f2f0ea';
+background: '#fbfaf6';
+disabledBackground: '#f9fafb';
+};
+
+export declare const input: Input;
+
+export type Buttons = {
+primary: {
+hover: '#2c2c50';
+disabled: '#f3f4f6';
+pressed: '#2c2c50';
+default: '#232342';
+};
+secondary: {
+defaultBorder: 'rgba(35, 35, 66, 0.5)';
+hoverBackground: '#edebe2';
+pressedBackground: '#e4e1d6';
+disabledBackground: '#f4f2eb';
+defaultBackground: '#fbfaf6';
+default: '#232342';
+};
+tertiary: {
+default: '#232342';
+hover: '#232342';
+pressed: '#232342';
+disabled: '#6b7280';
+};
+destructive: '#c9291c';
+navigation: {
+active: 'rgba(62, 123, 246, 0.1)';
+defaultBorder: 'rgba(62, 123, 246, 0.3)';
+hoverBackground: 'rgba(62, 123, 246, 0.1)';
+pressedBackground: 'rgba(62, 123, 246, 0.1)';
+activeBorder: '#1055e2';
+};
+};
+
+export declare const buttons: Buttons;
+
+export type Activity = {
+recipeRun: '#9d5be8';
+commitJob: '#1055e2';
+visualization: '#27aa88';
+};
+
+export declare const activity: Activity;
+
+export type Tab = {
+secondaryBackground: '#e5e7eb';
+};
+
+export declare const tab: Tab;
+
+export type Code = {
+background: '#edebe2';
+};
+
+export declare const code: Code;
+
+export declare const brand: '#1055e2';
+
+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;