@charcoal-ui/theme 5.0.0-beta.2 → 5.0.0-beta.4

package/dist/index.cjs

@@ -0,0 +1,177 @@
+
+//#region src/default.ts
+const common = {
+	borderRadius: {
+		"4": 4,
+		"8": 8,
+		"16": 16,
+		"24": 24,
+		none: 0,
+		oval: 999999
+	},
+	breakpoint: {
+		screen1: 744,
+		screen2: 952,
+		screen3: 1160,
+		screen4: 1368
+	},
+	elementEffect: { disabled: {
+		opacity: .32,
+		type: "opacity"
+	} },
+	gradientColor: {
+		callToAction: [{
+			color: "#d1ff1a",
+			ratio: 0
+		}, {
+			color: "#1ad1ff",
+			ratio: 100
+		}],
+		surface5: [{
+			color: "rgba(0,0,0,0.32)",
+			ratio: 0
+		}, {
+			color: "rgba(0,0,0,0)",
+			ratio: 100
+		}]
+	},
+	grid: { unit: {
+		column: 80,
+		gutter: 24
+	} },
+	outline: {
+		assertive: {
+			color: "rgba(255,43,0,0.32)",
+			weight: 4
+		},
+		default: {
+			color: "rgba(0,150,250,0.32)",
+			weight: 4
+		}
+	},
+	spacing: {
+		"0": 0,
+		"4": 4,
+		"8": 8,
+		"16": 16,
+		"24": 24,
+		"40": 40,
+		"64": 64,
+		"104": 104,
+		"168": 168,
+		"272": 272,
+		"440": 440
+	},
+	transition: { default: { duration: .2 } },
+	typography: { size: {
+		"12": {
+			fontSize: 12,
+			lineHeight: 20
+		},
+		"14": {
+			fontSize: 14,
+			lineHeight: 22
+		},
+		"16": {
+			fontSize: 16,
+			lineHeight: 24
+		},
+		"20": {
+			fontSize: 20,
+			lineHeight: 28
+		},
+		"32": {
+			fontSize: 32,
+			lineHeight: 40
+		}
+	} }
+};
+const light = {
+	...common,
+	border: { default: { color: "rgba(0,0,0,0.08)" } },
+	color: {
+		assertive: "#ff2b00",
+		background1: "#ffffff",
+		background2: "#f5f5f5",
+		border: "rgba(0,0,0,0.08)",
+		brand: "#0096fa",
+		icon6: "rgba(255,255,255,0.28)",
+		link1: "#3d7699",
+		link2: "rgba(255,255,255,0.36)",
+		success: "#b1cc29",
+		surface1: "#ffffff",
+		surface10: "rgba(0,0,0,0.16)",
+		surface2: "rgba(0,0,0,0.02)",
+		surface3: "rgba(0,0,0,0.04)",
+		surface4: "rgba(0,0,0,0.32)",
+		surface6: "rgba(0,0,0,0.88)",
+		surface7: "rgba(0,0,0,0.02)",
+		surface8: "rgba(0,0,0,0.88)",
+		surface9: "#ffffff",
+		text1: "#1f1f1f",
+		text2: "#474747",
+		text3: "#858585",
+		text4: "#adadad",
+		text5: "#ffffff",
+		transparent: "rgba(0,0,0,0)",
+		updatedItem: "rgba(0,150,250,0.04)",
+		warning: "#ffaf0f"
+	},
+	effect: {
+		hover: {
+			color: "rgba(0,0,0,0.04)",
+			type: "alpha"
+		},
+		press: {
+			color: "rgba(0,0,0,0.16)",
+			type: "alpha"
+		}
+	}
+};
+const dark = {
+	...common,
+	border: { default: { color: "rgba(255,255,255,0.12)" } },
+	color: {
+		assertive: "#ff2b00",
+		background1: "#1f1f1f",
+		background2: "#000000",
+		border: "rgba(255,255,255,0.12)",
+		brand: "#0096fa",
+		icon6: "rgba(255,255,255,0.28)",
+		link1: "#669FC2",
+		link2: "rgba(255,255,255,0.36)",
+		success: "#b1cc29",
+		surface1: "#1f1f1f",
+		surface10: "rgba(255,255,255,0.2)",
+		surface2: "rgba(0,0,0,0.16)",
+		surface3: "rgba(255,255,255,0.12)",
+		surface4: "rgba(0,0,0,0.32)",
+		surface6: "rgba(255,255,255,0.12)",
+		surface7: "rgba(0,0,0,0)",
+		surface8: "rgba(0,0,0,0.88)",
+		surface9: "#333333",
+		text1: "#f5f5f5",
+		text2: "#d6d6d6",
+		text3: "#858585",
+		text4: "#5c5c5c",
+		text5: "#f5f5f5",
+		transparent: "rgba(0,0,0,0)",
+		updatedItem: "rgba(0,150,250,0.12)",
+		warning: "#ffaf0f"
+	},
+	effect: {
+		hover: {
+			color: "rgba(255,255,255,0.12)",
+			type: "alpha"
+		},
+		press: {
+			color: "rgba(255,255,255,0.2)",
+			type: "alpha"
+		}
+	}
+};
+
+//#endregion
+exports.dark = dark;
+exports.light = light;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["light: CharcoalTheme","dark: CharcoalTheme"],"sources":["../src/default.ts"],"sourcesContent":["/** This file is auto generated. DO NOT EDIT BY HAND. */\nimport { CharcoalTheme } from './theme'\n\nconst common = {\n  borderRadius: {\n    '4': 4,\n    '8': 8,\n    '16': 16,\n    '24': 24,\n    none: 0,\n    oval: 999999,\n  },\n  breakpoint: {\n    screen1: 744,\n    screen2: 952,\n    screen3: 1160,\n    screen4: 1368,\n  },\n  elementEffect: {\n    disabled: {\n      opacity: 0.32,\n      type: 'opacity',\n    },\n  },\n  gradientColor: {\n    callToAction: [\n      {\n        color: '#d1ff1a',\n        ratio: 0,\n      },\n      {\n        color: '#1ad1ff',\n        ratio: 100,\n      },\n    ],\n    surface5: [\n      {\n        color: 'rgba(0,0,0,0.32)',\n        ratio: 0,\n      },\n      {\n        color: 'rgba(0,0,0,0)',\n        ratio: 100,\n      },\n    ],\n  },\n  grid: {\n    unit: {\n      column: 80,\n      gutter: 24,\n    },\n  },\n  outline: {\n    assertive: {\n      color: 'rgba(255,43,0,0.32)',\n      weight: 4,\n    },\n    default: {\n      color: 'rgba(0,150,250,0.32)',\n      weight: 4,\n    },\n  },\n  spacing: {\n    '0': 0,\n    '4': 4,\n    '8': 8,\n    '16': 16,\n    '24': 24,\n    '40': 40,\n    '64': 64,\n    '104': 104,\n    '168': 168,\n    '272': 272,\n    '440': 440,\n  },\n  transition: {\n    default: {\n      duration: 0.2,\n    },\n  },\n  typography: {\n    size: {\n      '12': {\n        fontSize: 12,\n        lineHeight: 20,\n      },\n      '14': {\n        fontSize: 14,\n        lineHeight: 22,\n      },\n      '16': {\n        fontSize: 16,\n        lineHeight: 24,\n      },\n      '20': {\n        fontSize: 20,\n        lineHeight: 28,\n      },\n      '32': {\n        fontSize: 32,\n        lineHeight: 40,\n      },\n    },\n  },\n} as const\n\nexport const light: CharcoalTheme = {\n  ...common,\n  ...{\n    border: {\n      default: {\n        color: 'rgba(0,0,0,0.08)',\n      },\n    },\n    color: {\n      assertive: '#ff2b00',\n      background1: '#ffffff',\n      background2: '#f5f5f5',\n      border: 'rgba(0,0,0,0.08)',\n      brand: '#0096fa',\n      icon6: 'rgba(255,255,255,0.28)',\n      link1: '#3d7699',\n      link2: 'rgba(255,255,255,0.36)',\n      success: '#b1cc29',\n      surface1: '#ffffff',\n      surface10: 'rgba(0,0,0,0.16)',\n      surface2: 'rgba(0,0,0,0.02)',\n      surface3: 'rgba(0,0,0,0.04)',\n      surface4: 'rgba(0,0,0,0.32)',\n      surface6: 'rgba(0,0,0,0.88)',\n      surface7: 'rgba(0,0,0,0.02)',\n      surface8: 'rgba(0,0,0,0.88)',\n      surface9: '#ffffff',\n      text1: '#1f1f1f',\n      text2: '#474747',\n      text3: '#858585',\n      text4: '#adadad',\n      text5: '#ffffff',\n      transparent: 'rgba(0,0,0,0)',\n      updatedItem: 'rgba(0,150,250,0.04)',\n      warning: '#ffaf0f',\n    },\n    effect: {\n      hover: {\n        color: 'rgba(0,0,0,0.04)',\n        type: 'alpha',\n      },\n      press: {\n        color: 'rgba(0,0,0,0.16)',\n        type: 'alpha',\n      },\n    },\n  },\n}\n\nexport const dark: CharcoalTheme = {\n  ...common,\n  ...{\n    border: {\n      default: {\n        color: 'rgba(255,255,255,0.12)',\n      },\n    },\n    color: {\n      assertive: '#ff2b00',\n      background1: '#1f1f1f',\n      background2: '#000000',\n      border: 'rgba(255,255,255,0.12)',\n      brand: '#0096fa',\n      icon6: 'rgba(255,255,255,0.28)',\n      link1: '#669FC2',\n      link2: 'rgba(255,255,255,0.36)',\n      success: '#b1cc29',\n      surface1: '#1f1f1f',\n      surface10: 'rgba(255,255,255,0.2)',\n      surface2: 'rgba(0,0,0,0.16)',\n      surface3: 'rgba(255,255,255,0.12)',\n      surface4: 'rgba(0,0,0,0.32)',\n      surface6: 'rgba(255,255,255,0.12)',\n      surface7: 'rgba(0,0,0,0)',\n      surface8: 'rgba(0,0,0,0.88)',\n      surface9: '#333333',\n      text1: '#f5f5f5',\n      text2: '#d6d6d6',\n      text3: '#858585',\n      text4: '#5c5c5c',\n      text5: '#f5f5f5',\n      transparent: 'rgba(0,0,0,0)',\n      updatedItem: 'rgba(0,150,250,0.12)',\n      warning: '#ffaf0f',\n    },\n    effect: {\n      hover: {\n        color: 'rgba(255,255,255,0.12)',\n        type: 'alpha',\n      },\n      press: {\n        color: 'rgba(255,255,255,0.2)',\n        type: 'alpha',\n      },\n    },\n  },\n}\n"],"mappings":";;AAGA,MAAM,SAAS;CACb,cAAc;EACZ,KAAK;EACL,KAAK;EACL,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,YAAY;EACV,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACV;CACD,eAAe,EACb,UAAU;EACR,SAAS;EACT,MAAM;EACP,EACF;CACD,eAAe;EACb,cAAc,CACZ;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF;EACD,UAAU,CACR;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF;EACF;CACD,MAAM,EACJ,MAAM;EACJ,QAAQ;EACR,QAAQ;EACT,EACF;CACD,SAAS;EACP,WAAW;GACT,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACF;CACD,SAAS;EACP,KAAK;EACL,KAAK;EACL,KAAK;EACL,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACR;CACD,YAAY,EACV,SAAS,EACP,UAAU,IACX,EACF;CACD,YAAY,EACV,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACF,EACF;CACF;AAED,MAAaA,QAAuB;CAClC,GAAG;CAED,QAAQ,EACN,SAAS,EACP,OAAO,oBACR,EACF;CACD,OAAO;EACL,WAAW;EACX,aAAa;EACb,aAAa;EACb,QAAQ;EACR,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,SAAS;EACT,UAAU;EACV,WAAW;EACX,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,aAAa;EACb,aAAa;EACb,SAAS;EACV;CACD,QAAQ;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACP;EACD,OAAO;GACL,OAAO;GACP,MAAM;GACP;EACF;CAEJ;AAED,MAAaC,OAAsB;CACjC,GAAG;CAED,QAAQ,EACN,SAAS,EACP,OAAO,0BACR,EACF;CACD,OAAO;EACL,WAAW;EACX,aAAa;EACb,aAAa;EACb,QAAQ;EACR,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,SAAS;EACT,UAAU;EACV,WAAW;EACX,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,aAAa;EACb,aAAa;EACb,SAAS;EACV;CACD,QAAQ;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACP;EACD,OAAO;GACL,OAAO;GACP,MAAM;GACP;EACF;CAEJ"}

package/dist/index.d.cts

@@ -0,0 +1,129 @@
+import { BORDER_RADIUS, Effect, GradientMaterial, Material, OpacityEffect, SPACING, TypographyDescriptor } from "@charcoal-ui/foundation";
+
+//#region src/abstract-theme.d.ts
+type EffectType = "hover" | "press" | "disabled";
+type Key = string | number | symbol;
+type ColorStyleTheme = { [key in Key]: Material };
+interface CharcoalAbstractTheme {
+  color: ColorStyleTheme;
+  gradientColor: { [key in Key]: GradientMaterial };
+  effect: { [key in EffectType]?: Effect };
+  elementEffect: { [key in EffectType]?: OpacityEffect };
+  spacing: { [key in Key]: number };
+  typography: {
+    size: { [key in Key]: TypographyDescriptor };
+  };
+  borderRadius: { [key in Key]: number };
+  border: { [key in Key]: {
+    color: Material;
+  } };
+  outline: { [key in Key]: {
+    color: Material;
+    weight: number;
+  } };
+  grid: {
+    unit: {
+      column: number;
+      gutter: number;
+    };
+  };
+  transition: { [key in Key]: {
+    duration: number;
+  } };
+}
+//#endregion
+//#region src/theme.d.ts
+interface CharcoalTheme extends CharcoalAbstractTheme {
+  readonly color: ThemeColor;
+  readonly gradientColor: ThemeColorGradient;
+  /**
+  * effect for color (background or font color)
+  */
+  readonly effect: ThemeEffect;
+  /**
+  * effect for element its own (opacify element includes descendants)
+  */
+  readonly elementEffect: ThemeElementEffect;
+  readonly spacing: Spacing;
+  readonly typography: {
+    readonly size: Typography;
+  };
+  readonly borderRadius: BorderRadius;
+  readonly border: {
+    readonly default: {
+      readonly color: Material;
+    };
+  };
+  readonly outline: {
+    readonly default: {
+      readonly color: string;
+      readonly weight: 4;
+    };
+    readonly assertive: {
+      readonly color: string;
+      readonly weight: 4;
+    };
+  };
+  readonly breakpoint: Breakpoint;
+}
+type ThemeColor = {
+  readonly transparent: Material;
+  readonly background1: Material;
+  readonly background2: Material;
+  readonly surface1: Material;
+  readonly surface2: Material;
+  readonly surface3: Material;
+  readonly surface4: Material;
+  readonly surface6: Material;
+  readonly surface7: Material;
+  readonly surface8: Material;
+  readonly surface9: Material;
+  readonly surface10: Material;
+  readonly link1: Material;
+  readonly link2: Material;
+  readonly text1: Material;
+  readonly text2: Material;
+  readonly text3: Material;
+  readonly text4: Material;
+  readonly text5: Material;
+  readonly icon6: Material;
+  readonly brand: Material;
+  readonly assertive: Material;
+  readonly warning: Material;
+  readonly success: Material;
+  readonly updatedItem: Material;
+  readonly border: Material;
+};
+type ThemeEffect = {
+  readonly hover: Effect;
+  readonly press: Effect;
+};
+type ThemeElementEffect = {
+  readonly disabled: OpacityEffect;
+};
+type ThemeColorGradient = {
+  readonly surface5: GradientMaterial;
+  readonly callToAction: GradientMaterial;
+};
+type Typography = {
+  readonly [12]: TypographyDescriptor;
+  readonly [14]: TypographyDescriptor;
+  readonly [16]: TypographyDescriptor;
+  readonly [20]: TypographyDescriptor;
+  readonly [32]: TypographyDescriptor;
+};
+type Breakpoint = {
+  readonly screen1: number;
+  readonly screen2: number;
+  readonly screen3: number;
+  readonly screen4: number;
+};
+type Spacing = Readonly<Record<keyof typeof SPACING, number>>;
+type BorderRadius = Readonly<Record<keyof typeof BORDER_RADIUS, number>>;
+//#endregion
+//#region src/default.d.ts
+declare const light: CharcoalTheme;
+declare const dark: CharcoalTheme;
+//#endregion
+export { BorderRadius, Breakpoint, CharcoalAbstractTheme, CharcoalTheme, ColorStyleTheme, EffectType, Key, Spacing, ThemeColor, ThemeColorGradient, ThemeEffect, ThemeElementEffect, Typography, dark, light };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":["light: CharcoalTheme","dark: CharcoalTheme"],"sources":["../src/abstract-theme.ts","../src/theme.ts","../src/default.ts"],"sourcesContent":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,4 +1,129 @@
-export * from './theme';
-export * from './abstract-theme';
-export * from './default';
+import { BORDER_RADIUS, Effect, GradientMaterial, Material, OpacityEffect, SPACING, TypographyDescriptor } from "@charcoal-ui/foundation";
+
+//#region src/abstract-theme.d.ts
+type EffectType = "hover" | "press" | "disabled";
+type Key = string | number | symbol;
+type ColorStyleTheme = { [key in Key]: Material };
+interface CharcoalAbstractTheme {
+  color: ColorStyleTheme;
+  gradientColor: { [key in Key]: GradientMaterial };
+  effect: { [key in EffectType]?: Effect };
+  elementEffect: { [key in EffectType]?: OpacityEffect };
+  spacing: { [key in Key]: number };
+  typography: {
+    size: { [key in Key]: TypographyDescriptor };
+  };
+  borderRadius: { [key in Key]: number };
+  border: { [key in Key]: {
+    color: Material;
+  } };
+  outline: { [key in Key]: {
+    color: Material;
+    weight: number;
+  } };
+  grid: {
+    unit: {
+      column: number;
+      gutter: number;
+    };
+  };
+  transition: { [key in Key]: {
+    duration: number;
+  } };
+}
+//#endregion
+//#region src/theme.d.ts
+interface CharcoalTheme extends CharcoalAbstractTheme {
+  readonly color: ThemeColor;
+  readonly gradientColor: ThemeColorGradient;
+  /**
+  * effect for color (background or font color)
+  */
+  readonly effect: ThemeEffect;
+  /**
+  * effect for element its own (opacify element includes descendants)
+  */
+  readonly elementEffect: ThemeElementEffect;
+  readonly spacing: Spacing;
+  readonly typography: {
+    readonly size: Typography;
+  };
+  readonly borderRadius: BorderRadius;
+  readonly border: {
+    readonly default: {
+      readonly color: Material;
+    };
+  };
+  readonly outline: {
+    readonly default: {
+      readonly color: string;
+      readonly weight: 4;
+    };
+    readonly assertive: {
+      readonly color: string;
+      readonly weight: 4;
+    };
+  };
+  readonly breakpoint: Breakpoint;
+}
+type ThemeColor = {
+  readonly transparent: Material;
+  readonly background1: Material;
+  readonly background2: Material;
+  readonly surface1: Material;
+  readonly surface2: Material;
+  readonly surface3: Material;
+  readonly surface4: Material;
+  readonly surface6: Material;
+  readonly surface7: Material;
+  readonly surface8: Material;
+  readonly surface9: Material;
+  readonly surface10: Material;
+  readonly link1: Material;
+  readonly link2: Material;
+  readonly text1: Material;
+  readonly text2: Material;
+  readonly text3: Material;
+  readonly text4: Material;
+  readonly text5: Material;
+  readonly icon6: Material;
+  readonly brand: Material;
+  readonly assertive: Material;
+  readonly warning: Material;
+  readonly success: Material;
+  readonly updatedItem: Material;
+  readonly border: Material;
+};
+type ThemeEffect = {
+  readonly hover: Effect;
+  readonly press: Effect;
+};
+type ThemeElementEffect = {
+  readonly disabled: OpacityEffect;
+};
+type ThemeColorGradient = {
+  readonly surface5: GradientMaterial;
+  readonly callToAction: GradientMaterial;
+};
+type Typography = {
+  readonly [12]: TypographyDescriptor;
+  readonly [14]: TypographyDescriptor;
+  readonly [16]: TypographyDescriptor;
+  readonly [20]: TypographyDescriptor;
+  readonly [32]: TypographyDescriptor;
+};
+type Breakpoint = {
+  readonly screen1: number;
+  readonly screen2: number;
+  readonly screen3: number;
+  readonly screen4: number;
+};
+type Spacing = Readonly<Record<keyof typeof SPACING, number>>;
+type BorderRadius = Readonly<Record<keyof typeof BORDER_RADIUS, number>>;
+//#endregion
+//#region src/default.d.ts
+declare const light: CharcoalTheme;
+declare const dark: CharcoalTheme;
+//#endregion
+export { BorderRadius, Breakpoint, CharcoalAbstractTheme, CharcoalTheme, ColorStyleTheme, EffectType, Key, Spacing, ThemeColor, ThemeColorGradient, ThemeEffect, ThemeElementEffect, Typography, dark, light };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,kBAAkB,CAAA;AAChC,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","names":["light: CharcoalTheme","dark: CharcoalTheme"],"sources":["../src/abstract-theme.ts","../src/theme.ts","../src/default.ts"],"sourcesContent":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,175 @@
+//#region src/default.ts
+const common = {
+	borderRadius: {
+		"4": 4,
+		"8": 8,
+		"16": 16,
+		"24": 24,
+		none: 0,
+		oval: 999999
+	},
+	breakpoint: {
+		screen1: 744,
+		screen2: 952,
+		screen3: 1160,
+		screen4: 1368
+	},
+	elementEffect: { disabled: {
+		opacity: .32,
+		type: "opacity"
+	} },
+	gradientColor: {
+		callToAction: [{
+			color: "#d1ff1a",
+			ratio: 0
+		}, {
+			color: "#1ad1ff",
+			ratio: 100
+		}],
+		surface5: [{
+			color: "rgba(0,0,0,0.32)",
+			ratio: 0
+		}, {
+			color: "rgba(0,0,0,0)",
+			ratio: 100
+		}]
+	},
+	grid: { unit: {
+		column: 80,
+		gutter: 24
+	} },
+	outline: {
+		assertive: {
+			color: "rgba(255,43,0,0.32)",
+			weight: 4
+		},
+		default: {
+			color: "rgba(0,150,250,0.32)",
+			weight: 4
+		}
+	},
+	spacing: {
+		"0": 0,
+		"4": 4,
+		"8": 8,
+		"16": 16,
+		"24": 24,
+		"40": 40,
+		"64": 64,
+		"104": 104,
+		"168": 168,
+		"272": 272,
+		"440": 440
+	},
+	transition: { default: { duration: .2 } },
+	typography: { size: {
+		"12": {
+			fontSize: 12,
+			lineHeight: 20
+		},
+		"14": {
+			fontSize: 14,
+			lineHeight: 22
+		},
+		"16": {
+			fontSize: 16,
+			lineHeight: 24
+		},
+		"20": {
+			fontSize: 20,
+			lineHeight: 28
+		},
+		"32": {
+			fontSize: 32,
+			lineHeight: 40
+		}
+	} }
+};
+const light = {
+	...common,
+	border: { default: { color: "rgba(0,0,0,0.08)" } },
+	color: {
+		assertive: "#ff2b00",
+		background1: "#ffffff",
+		background2: "#f5f5f5",
+		border: "rgba(0,0,0,0.08)",
+		brand: "#0096fa",
+		icon6: "rgba(255,255,255,0.28)",
+		link1: "#3d7699",
+		link2: "rgba(255,255,255,0.36)",
+		success: "#b1cc29",
+		surface1: "#ffffff",
+		surface10: "rgba(0,0,0,0.16)",
+		surface2: "rgba(0,0,0,0.02)",
+		surface3: "rgba(0,0,0,0.04)",
+		surface4: "rgba(0,0,0,0.32)",
+		surface6: "rgba(0,0,0,0.88)",
+		surface7: "rgba(0,0,0,0.02)",
+		surface8: "rgba(0,0,0,0.88)",
+		surface9: "#ffffff",
+		text1: "#1f1f1f",
+		text2: "#474747",
+		text3: "#858585",
+		text4: "#adadad",
+		text5: "#ffffff",
+		transparent: "rgba(0,0,0,0)",
+		updatedItem: "rgba(0,150,250,0.04)",
+		warning: "#ffaf0f"
+	},
+	effect: {
+		hover: {
+			color: "rgba(0,0,0,0.04)",
+			type: "alpha"
+		},
+		press: {
+			color: "rgba(0,0,0,0.16)",
+			type: "alpha"
+		}
+	}
+};
+const dark = {
+	...common,
+	border: { default: { color: "rgba(255,255,255,0.12)" } },
+	color: {
+		assertive: "#ff2b00",
+		background1: "#1f1f1f",
+		background2: "#000000",
+		border: "rgba(255,255,255,0.12)",
+		brand: "#0096fa",
+		icon6: "rgba(255,255,255,0.28)",
+		link1: "#669FC2",
+		link2: "rgba(255,255,255,0.36)",
+		success: "#b1cc29",
+		surface1: "#1f1f1f",
+		surface10: "rgba(255,255,255,0.2)",
+		surface2: "rgba(0,0,0,0.16)",
+		surface3: "rgba(255,255,255,0.12)",
+		surface4: "rgba(0,0,0,0.32)",
+		surface6: "rgba(255,255,255,0.12)",
+		surface7: "rgba(0,0,0,0)",
+		surface8: "rgba(0,0,0,0.88)",
+		surface9: "#333333",
+		text1: "#f5f5f5",
+		text2: "#d6d6d6",
+		text3: "#858585",
+		text4: "#5c5c5c",
+		text5: "#f5f5f5",
+		transparent: "rgba(0,0,0,0)",
+		updatedItem: "rgba(0,150,250,0.12)",
+		warning: "#ffaf0f"
+	},
+	effect: {
+		hover: {
+			color: "rgba(255,255,255,0.12)",
+			type: "alpha"
+		},
+		press: {
+			color: "rgba(255,255,255,0.2)",
+			type: "alpha"
+		}
+	}
+};
+
+//#endregion
+export { dark, light };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["light: CharcoalTheme","dark: CharcoalTheme"],"sources":["../src/default.ts"],"sourcesContent":["/** This file is auto generated. DO NOT EDIT BY HAND. */\nimport { CharcoalTheme } from './theme'\n\nconst common = {\n  borderRadius: {\n    '4': 4,\n    '8': 8,\n    '16': 16,\n    '24': 24,\n    none: 0,\n    oval: 999999,\n  },\n  breakpoint: {\n    screen1: 744,\n    screen2: 952,\n    screen3: 1160,\n    screen4: 1368,\n  },\n  elementEffect: {\n    disabled: {\n      opacity: 0.32,\n      type: 'opacity',\n    },\n  },\n  gradientColor: {\n    callToAction: [\n      {\n        color: '#d1ff1a',\n        ratio: 0,\n      },\n      {\n        color: '#1ad1ff',\n        ratio: 100,\n      },\n    ],\n    surface5: [\n      {\n        color: 'rgba(0,0,0,0.32)',\n        ratio: 0,\n      },\n      {\n        color: 'rgba(0,0,0,0)',\n        ratio: 100,\n      },\n    ],\n  },\n  grid: {\n    unit: {\n      column: 80,\n      gutter: 24,\n    },\n  },\n  outline: {\n    assertive: {\n      color: 'rgba(255,43,0,0.32)',\n      weight: 4,\n    },\n    default: {\n      color: 'rgba(0,150,250,0.32)',\n      weight: 4,\n    },\n  },\n  spacing: {\n    '0': 0,\n    '4': 4,\n    '8': 8,\n    '16': 16,\n    '24': 24,\n    '40': 40,\n    '64': 64,\n    '104': 104,\n    '168': 168,\n    '272': 272,\n    '440': 440,\n  },\n  transition: {\n    default: {\n      duration: 0.2,\n    },\n  },\n  typography: {\n    size: {\n      '12': {\n        fontSize: 12,\n        lineHeight: 20,\n      },\n      '14': {\n        fontSize: 14,\n        lineHeight: 22,\n      },\n      '16': {\n        fontSize: 16,\n        lineHeight: 24,\n      },\n      '20': {\n        fontSize: 20,\n        lineHeight: 28,\n      },\n      '32': {\n        fontSize: 32,\n        lineHeight: 40,\n      },\n    },\n  },\n} as const\n\nexport const light: CharcoalTheme = {\n  ...common,\n  ...{\n    border: {\n      default: {\n        color: 'rgba(0,0,0,0.08)',\n      },\n    },\n    color: {\n      assertive: '#ff2b00',\n      background1: '#ffffff',\n      background2: '#f5f5f5',\n      border: 'rgba(0,0,0,0.08)',\n      brand: '#0096fa',\n      icon6: 'rgba(255,255,255,0.28)',\n      link1: '#3d7699',\n      link2: 'rgba(255,255,255,0.36)',\n      success: '#b1cc29',\n      surface1: '#ffffff',\n      surface10: 'rgba(0,0,0,0.16)',\n      surface2: 'rgba(0,0,0,0.02)',\n      surface3: 'rgba(0,0,0,0.04)',\n      surface4: 'rgba(0,0,0,0.32)',\n      surface6: 'rgba(0,0,0,0.88)',\n      surface7: 'rgba(0,0,0,0.02)',\n      surface8: 'rgba(0,0,0,0.88)',\n      surface9: '#ffffff',\n      text1: '#1f1f1f',\n      text2: '#474747',\n      text3: '#858585',\n      text4: '#adadad',\n      text5: '#ffffff',\n      transparent: 'rgba(0,0,0,0)',\n      updatedItem: 'rgba(0,150,250,0.04)',\n      warning: '#ffaf0f',\n    },\n    effect: {\n      hover: {\n        color: 'rgba(0,0,0,0.04)',\n        type: 'alpha',\n      },\n      press: {\n        color: 'rgba(0,0,0,0.16)',\n        type: 'alpha',\n      },\n    },\n  },\n}\n\nexport const dark: CharcoalTheme = {\n  ...common,\n  ...{\n    border: {\n      default: {\n        color: 'rgba(255,255,255,0.12)',\n      },\n    },\n    color: {\n      assertive: '#ff2b00',\n      background1: '#1f1f1f',\n      background2: '#000000',\n      border: 'rgba(255,255,255,0.12)',\n      brand: '#0096fa',\n      icon6: 'rgba(255,255,255,0.28)',\n      link1: '#669FC2',\n      link2: 'rgba(255,255,255,0.36)',\n      success: '#b1cc29',\n      surface1: '#1f1f1f',\n      surface10: 'rgba(255,255,255,0.2)',\n      surface2: 'rgba(0,0,0,0.16)',\n      surface3: 'rgba(255,255,255,0.12)',\n      surface4: 'rgba(0,0,0,0.32)',\n      surface6: 'rgba(255,255,255,0.12)',\n      surface7: 'rgba(0,0,0,0)',\n      surface8: 'rgba(0,0,0,0.88)',\n      surface9: '#333333',\n      text1: '#f5f5f5',\n      text2: '#d6d6d6',\n      text3: '#858585',\n      text4: '#5c5c5c',\n      text5: '#f5f5f5',\n      transparent: 'rgba(0,0,0,0)',\n      updatedItem: 'rgba(0,150,250,0.12)',\n      warning: '#ffaf0f',\n    },\n    effect: {\n      hover: {\n        color: 'rgba(255,255,255,0.12)',\n        type: 'alpha',\n      },\n      press: {\n        color: 'rgba(255,255,255,0.2)',\n        type: 'alpha',\n      },\n    },\n  },\n}\n"],"mappings":";AAGA,MAAM,SAAS;CACb,cAAc;EACZ,KAAK;EACL,KAAK;EACL,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,YAAY;EACV,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACV;CACD,eAAe,EACb,UAAU;EACR,SAAS;EACT,MAAM;EACP,EACF;CACD,eAAe;EACb,cAAc,CACZ;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF;EACD,UAAU,CACR;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF;EACF;CACD,MAAM,EACJ,MAAM;EACJ,QAAQ;EACR,QAAQ;EACT,EACF;CACD,SAAS;EACP,WAAW;GACT,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACF;CACD,SAAS;EACP,KAAK;EACL,KAAK;EACL,KAAK;EACL,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACR;CACD,YAAY,EACV,SAAS,EACP,UAAU,IACX,EACF;CACD,YAAY,EACV,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,UAAU;GACV,YAAY;GACb;EACF,EACF;CACF;AAED,MAAaA,QAAuB;CAClC,GAAG;CAED,QAAQ,EACN,SAAS,EACP,OAAO,oBACR,EACF;CACD,OAAO;EACL,WAAW;EACX,aAAa;EACb,aAAa;EACb,QAAQ;EACR,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,SAAS;EACT,UAAU;EACV,WAAW;EACX,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,aAAa;EACb,aAAa;EACb,SAAS;EACV;CACD,QAAQ;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACP;EACD,OAAO;GACL,OAAO;GACP,MAAM;GACP;EACF;CAEJ;AAED,MAAaC,OAAsB;CACjC,GAAG;CAED,QAAQ,EACN,SAAS,EACP,OAAO,0BACR,EACF;CACD,OAAO;EACL,WAAW;EACX,aAAa;EACb,aAAa;EACb,QAAQ;EACR,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,SAAS;EACT,UAAU;EACV,WAAW;EACX,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,aAAa;EACb,aAAa;EACb,SAAS;EACV;CACD,QAAQ;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACP;EACD,OAAO;GACL,OAAO;GACP,MAAM;GACP;EACF;CAEJ"}