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

package/dist/index.esm.js

@@ -0,0 +1,27 @@
+import * as borderRadius_js from './border-radius.js';
+export { borderRadius_js as borderRadius };
+import * as breakpoints_js from './breakpoints.js';
+export { breakpoints_js as breakpoints };
+import * as colors_js from './colors.js';
+export { colors_js as colors };
+import * as height_js from './height.js';
+export { height_js as height };
+import * as padding_js from './padding.js';
+export { padding_js as padding };
+import * as semanticColors_js from './semantic-colors.js';
+export { semanticColors_js as semanticColors };
+import * as semanticColorsDark_js from './semantic-colors-dark.js';
+export { semanticColorsDark_js as semanticColorsDark };
+import * as semanticColorsLight_js from './semantic-colors-light.js';
+export { semanticColorsLight_js as semanticColorsLight };
+import * as semanticTypography_js from './semantic-typography.js';
+export { semanticTypography_js as semanticTypography };
+import * as shadows_js from './shadows.js';
+export { shadows_js as shadows };
+import * as spacing_js from './spacing.js';
+export { spacing_js as spacing };
+import * as strokes_js from './strokes.js';
+export { strokes_js as strokes };
+import * as typography_js from './typography.js';
+export { typography_js as typography };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var borderRadius_js = require('./border-radius.js');
+var breakpoints_js = require('./breakpoints.js');
+var colors_js = require('./colors.js');
+var height_js = require('./height.js');
+var padding_js = require('./padding.js');
+var semanticColors_js = require('./semantic-colors.js');
+var semanticColorsDark_js = require('./semantic-colors-dark.js');
+var semanticColorsLight_js = require('./semantic-colors-light.js');
+var semanticTypography_js = require('./semantic-typography.js');
+var shadows_js = require('./shadows.js');
+var spacing_js = require('./spacing.js');
+var strokes_js = require('./strokes.js');
+var typography_js = require('./typography.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var borderRadius_js__namespace = /*#__PURE__*/_interopNamespaceDefault(borderRadius_js);
+var breakpoints_js__namespace = /*#__PURE__*/_interopNamespaceDefault(breakpoints_js);
+var colors_js__namespace = /*#__PURE__*/_interopNamespaceDefault(colors_js);
+var height_js__namespace = /*#__PURE__*/_interopNamespaceDefault(height_js);
+var padding_js__namespace = /*#__PURE__*/_interopNamespaceDefault(padding_js);
+var semanticColors_js__namespace = /*#__PURE__*/_interopNamespaceDefault(semanticColors_js);
+var semanticColorsDark_js__namespace = /*#__PURE__*/_interopNamespaceDefault(semanticColorsDark_js);
+var semanticColorsLight_js__namespace = /*#__PURE__*/_interopNamespaceDefault(semanticColorsLight_js);
+var semanticTypography_js__namespace = /*#__PURE__*/_interopNamespaceDefault(semanticTypography_js);
+var shadows_js__namespace = /*#__PURE__*/_interopNamespaceDefault(shadows_js);
+var spacing_js__namespace = /*#__PURE__*/_interopNamespaceDefault(spacing_js);
+var strokes_js__namespace = /*#__PURE__*/_interopNamespaceDefault(strokes_js);
+var typography_js__namespace = /*#__PURE__*/_interopNamespaceDefault(typography_js);
+
+
+
+exports.borderRadius = borderRadius_js__namespace;
+exports.breakpoints = breakpoints_js__namespace;
+exports.colors = colors_js__namespace;
+exports.height = height_js__namespace;
+exports.padding = padding_js__namespace;
+exports.semanticColors = semanticColors_js__namespace;
+exports.semanticColorsDark = semanticColorsDark_js__namespace;
+exports.semanticColorsLight = semanticColorsLight_js__namespace;
+exports.semanticTypography = semanticTypography_js__namespace;
+exports.shadows = shadows_js__namespace;
+exports.spacing = spacing_js__namespace;
+exports.strokes = strokes_js__namespace;
+exports.typography = typography_js__namespace;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/padding.css

@@ -0,0 +1,7 @@
+:root {  --mod-padding-datagrid-cell-vertical: 8px;
+  --mod-padding-card: 24px;
+  --mod-padding-button-horizontal: 16px;
+  --mod-padding-button-vertical: 8px;
+  --mod-padding-input-horizontal: 12px;
+  --mod-padding-input-vertical: 4px;
+  --mod-padding-text-containers: 20px;}

package/dist/padding.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Moderne Design System
+ * TypeScript declarations generated from Figma design tokens
+ * @generated
+ */
+
+export declare const datagridCellVertical: 8;
+
+export declare const card: 24;
+
+export declare const buttonHorizontal: 16;
+
+export declare const buttonVertical: 8;
+
+export declare const inputHorizontal: 12;
+
+export declare const inputVertical: 4;
+
+export declare const textContainers: 20;
+
+declare const _default: {
+datagridCellVertical: typeof datagridCellVertical,
+card: typeof card,
+buttonHorizontal: typeof buttonHorizontal,
+buttonVertical: typeof buttonVertical,
+inputHorizontal: typeof inputHorizontal,
+inputVertical: typeof inputVertical,
+textContainers: typeof textContainers,
+};
+
+export default _default;

package/dist/padding.js

@@ -0,0 +1,51 @@
+/**
+ * Moderne Design System
+ * Generated from Figma design tokens
+ * @generated
+ */
+
+/**
+ * @type {number}
+ */
+export const datagridCellVertical = 8;
+
+/**
+ * @type {number}
+ */
+export const card = 24;
+
+/**
+ * @type {number}
+ */
+export const buttonHorizontal = 16;
+
+/**
+ * @type {number}
+ */
+export const buttonVertical = 8;
+
+/**
+ * @type {number}
+ */
+export const inputHorizontal = 12;
+
+/**
+ * @type {number}
+ */
+export const inputVertical = 4;
+
+/**
+ * @type {number}
+ */
+export const textContainers = 20;
+
+// Default export with all color groups
+export default {
+datagridCellVertical,
+card,
+buttonHorizontal,
+buttonVertical,
+inputHorizontal,
+inputVertical,
+textContainers,
+};

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

@@ -0,0 +1,494 @@
+/**
+ * Moderne Design System
+ * TypeScript declarations generated from Figma design tokens
+ * @generated
+ */
+
+export type Icons = {
+hoverBorder: 'rgba(127, 169, 249, 0.4)';
+pressedBackground: 'rgba(127, 169, 249, 0.16)';
+inverse: '#232342';
+hover: '#7fa9f9';
+hoverBackground: 'rgba(127, 169, 249, 0.16)';
+disabled: 'rgba(240, 240, 246, 0.08)';
+placeholder: '#9c9ca8';
+pressed: '#73aaff';
+utility: '#9c9ca8';
+default: '#f1f0ea';
+active: '#73aaff';
+};
+
+export declare const icons: Icons;
+
+export type Surfaces = {
+highlightBackground: 'rgba(127, 169, 249, 0.16)';
+activeHighlight: 'rgba(62, 123, 246, 0.1)';
+dataGrid: {
+header: '#2d2d36';
+selected: 'rgba(127, 169, 249, 0.16)';
+selectedHover: 'rgba(127, 169, 249, 0.16)';
+hover: '#2e2e38';
+default: '#26262e';
+border: 'rgba(240, 240, 246, 0.12)';
+borderStrong: 'rgba(240, 240, 246, 0.38)';
+stripe: '#222229';
+focused: 'rgba(127, 169, 249, 0.16)';
+pinned: '#2a2a32';
+disabled: '#1b1b21';
+background: '#26262e';
+};
+toggleKnob: '#8c8c96';
+page: '#141419';
+card: '#26262e';
+cardHeader: '#2d2d36';
+tabActive: '#26262e';
+listHover: '#2e2e38';
+shadowNeutral: 'rgba(0, 0, 0, 0.6)';
+shadowPrimary: 'rgba(16, 24, 128, 0.4)';
+tooltip: '#f1f0ea';
+scrim: 'rgba(0, 0, 0, 0.5)';
+tabSecondaryBackground: '#2d2d35';
+snackbarDarkMode: '#f1f0ea';
+snackbarBrand: '#131e7a';
+snackbarLightMode: '#33333d';
+white: '#26262e';
+black: '#17171c';
+};
+
+export declare const surfaces: Surfaces;
+
+export type Typography = {
+searchInputBackground: '#222229';
+linkDefault: '#73aaff';
+linkHover: '#f2f3ff';
+navigation: {
+search: {
+highlightText: '#7fa9f9';
+highlightBackground: 'rgba(62, 123, 246, 0.16)';
+inputBackground: '#222229';
+highlightBackgroundActive: 'rgba(62, 123, 246, 0.35)';
+};
+default: '#f1f0ea';
+};
+linkWhite: '#ffffff';
+linkWhiteHover: '#ffffff';
+tab: {
+disabled: '#9c9ca8';
+inactive: '#f1f0ea';
+active: '#7fa9f9';
+};
+tooltip: {
+secondary: '#9c9ca8';
+default: '#232342';
+};
+input: {
+placeholder: '#9c9ca8';
+default: '#f1f0ea';
+label: '#f1f0ea';
+helper: '#9c9ca8';
+};
+code: {
+primary: '#f1f0ea';
+secondary: '#9c9ca8';
+};
+button: {
+disabled: '#9c9ca8';
+};
+link: {
+primary: '#73aaff';
+disabled: '#75757f';
+default: '#73aaff';
+white: '#f9fafb';
+};
+error: '#fa826f';
+success: '#30f284';
+warning: '#ffa83d';
+legal: '#9c9ca8';
+bodySecondary: '#b9b9c6';
+body: '#f1f0ea';
+};
+
+export declare const typography: Typography;
+
+export type Border = {
+overlay: 'rgba(240, 240, 246, 0.08)';
+subtle: 'rgba(240, 240, 246, 0.08)';
+strong: 'rgba(240, 240, 246, 0.38)';
+hairline: 'rgba(240, 240, 246, 0.12)';
+primary: 'rgba(240, 240, 246, 0.12)';
+secondary: 'rgba(240, 240, 246, 0.12)';
+focus: '#7fa9f9';
+};
+
+export declare const border: Border;
+
+export type Status = {
+active: {
+dark: '#9b73f0';
+default: '#825ae1';
+light: '#231d34';
+transparent: 'rgba(125, 85, 220, 0.45)';
+border: '#402e66';
+};
+queued: {
+dark: '#b99bf2';
+default: '#a07deb';
+light: '#28223a';
+transparent: 'rgba(145, 110, 230, 0.45)';
+border: '#4d3b6b';
+};
+canceled: {
+dark: '#a59b8a';
+default: '#948876';
+light: '#232224';
+transparent: 'rgba(148, 136, 118, 0.35)';
+border: '#474033';
+};
+success: {
+border: '#264d33';
+light: '#192f26';
+default: '#37c36e';
+transparent: 'rgba(55, 195, 110, 0.45)';
+dark: '#30f284';
+};
+error: {
+border: '#612921';
+light: '#2e1b1b';
+default: '#eb4b2d';
+transparent: 'rgba(235, 75, 45, 0.42)';
+dark: '#fa826f';
+};
+warning: {
+border: '#59451a';
+light: '#34281d';
+default: '#f0a028';
+transparent: 'rgba(240, 160, 40, 0.45)';
+dark: '#e8ba4c';
+};
+info: {
+border: '#263b61';
+dark: '#69aaf0';
+default: '#468ee4';
+light: '#1a2435';
+transparent: 'rgba(65, 135, 225, 0.42)';
+};
+neutral: {
+border: '#423d38';
+dark: '#aca598';
+default: '#9b9487';
+light: '#242326';
+transparent: 'rgba(155, 148, 135, 0.38)';
+};
+successText: '#30f284';
+successTint: 'rgba(48, 242, 132, 0.13)';
+successBorder: 'rgba(48, 242, 132, 0.55)';
+errorText: '#fa826f';
+errorTint: 'rgba(252, 71, 50, 0.12)';
+errorBorder: 'rgba(252, 71, 50, 0.42)';
+warningText: '#e8ba4c';
+warningTint: 'rgba(255, 168, 61, 0.12)';
+warningBorder: 'rgba(255, 168, 61, 0.5)';
+queuedTint: 'rgba(157, 91, 232, 0.16)';
+queuedBorder: 'rgba(157, 91, 232, 0.45)';
+};
+
+export declare const status: Status;
+
+export type Link = {
+default: '#7fa9f9';
+hover: '#7fa9f9';
+tint: 'rgba(127, 169, 249, 0.16)';
+tintBorder: 'rgba(127, 169, 249, 0.4)';
+};
+
+export declare const link: Link;
+
+export type Control = {
+border: 'rgba(240, 240, 246, 0.38)';
+borderSelected: '#7fa9f9';
+glyph: '#7fa9f9';
+checkedBg: '#7fa9f9';
+checkedFg: '#0b1220';
+};
+
+export declare const control: Control;
+
+export type Progress = {
+track: 'rgba(127, 169, 249, 0.16)';
+fill: '#7fa9f9';
+label: '#7fa9f9';
+};
+
+export declare const progress: Progress;
+
+export type Illustration = {
+panel: '#26262e';
+stroke: 'rgba(240, 240, 246, 0.38)';
+strokeMuted: '#9c9ca8';
+inset: '#2a2a32';
+accent: '#8ca0f5';
+positive: '#30f284';
+};
+
+export declare const illustration: Illustration;
+
+export type Dataviz = {
+categorical: {
+coral: '#ff6f61';
+orange: '#ff8f52';
+tangerine: '#ffa83d';
+gold: '#ffd34d';
+green: '#30f284';
+periwinkle: '#8ca0f5';
+teal: '#25d0c0';
+lilac: '#b39deb';
+magenta: '#e6399b';
+lime: '#c7e84b';
+};
+boundary: {
+coral: '#a63325';
+orange: '#a34e14';
+tangerine: '#935b00';
+gold: '#806a00';
+green: '#1d5937';
+na: '#75757f';
+periwinkle: '#16306b';
+teal: '#0e4a45';
+lilac: '#3f1340';
+magenta: '#7a1e52';
+lime: '#4f5a12';
+};
+na: '#75757f';
+grid: 'rgba(240, 240, 246, 0.12)';
+};
+
+export declare const dataviz: Dataviz;
+
+export type Toast = {
+successText: '#4ade80';
+successBg: '#0f2015';
+successBorder: '#1e3a28';
+warningText: '#e3b341';
+warningBg: '#211d0c';
+warningBorder: '#3a3316';
+errorText: '#f76a62';
+errorBg: '#2a1012';
+errorBorder: '#4a1d1e';
+infoText: '#7fa9f9';
+infoBg: '#101a2e';
+infoBorder: '#1e3a6b';
+};
+
+export declare const toast: Toast;
+
+export type Surface = {
+canvasChrome: '#141419';
+canvasContent: '#1b1b21';
+field: '#222229';
+sunken: '#2a2a32';
+sunken2: '#33333d';
+rowHover: '#2e2e38';
+scrim: 'rgba(15, 15, 20, 0.45)';
+tooltip: '#2d2d36';
+cardFrosted: 'rgba(38, 38, 46, 0.78)';
+};
+
+export declare const surface: Surface;
+
+export type Text = {
+primary: '#f1f0ea';
+muted: '#b9b9c6';
+link: '#73aaff';
+tabActive: '#7fa9f9';
+onPrimary: '#17171c';
+codePrimary: '#e9eaf2';
+codeSecondary: '#9598ac';
+inputPlaceholder: '#9c9ca8';
+};
+
+export declare const text: Text;
+
+export type Button = {
+primaryBg: '#f1f0ea';
+primaryFg: '#17171c';
+primaryBgHover: '#fbfaf6';
+destructiveBg: '#fa826f';
+destructiveBgHover: '#f0b4ac';
+};
+
+export declare const button: Button;
+
+export type Data = {
+periwinkle: '#8ca0f5';
+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: '#33333d';
+wave: 'rgba(255, 255, 255, 0.08)';
+};
+
+export declare const skeleton: Skeleton;
+
+export type Accent = {
+default: '#7fa9f9';
+deep: '#7fa9f9';
+tint: 'rgba(127, 169, 249, 0.16)';
+border: 'rgba(127, 169, 249, 0.4)';
+primaryFg: '#ffffff';
+glow: 'rgba(62, 123, 246, 0.18)';
+glowSecondary: 'rgba(157, 91, 232, 0.2)';
+};
+
+export declare const accent: Accent;
+
+export type Role = {
+violetBorder: 'rgba(157, 91, 232, 0.45)';
+magentaTint: 'rgba(230, 57, 155, 0.14)';
+magentaText: '#e6399b';
+magentaBorder: 'rgba(230, 57, 155, 0.4)';
+tealTint: 'rgba(37, 208, 192, 0.16)';
+tealText: '#25d0c0';
+tealBorder: 'rgba(37, 208, 192, 0.42)';
+violetTint: 'rgba(157, 91, 232, 0.16)';
+violetText: '#9d5be8';
+};
+
+export declare const role: Role;
+
+export type Avatar = {
+userDefaultBg: '#30f284';
+userDefaultText: '#1d5937';
+initials: {
+text1: '#9d5be8';
+text2: '#30f284';
+text3: '#ffa83d';
+text4: '#e6399b';
+text5: '#9d5be8';
+text6: '#25d0c0';
+text7: '#3e7bf6';
+border1: 'rgba(157, 91, 232, 0.45)';
+border2: 'rgba(48, 242, 132, 0.42)';
+border3: 'rgba(255, 168, 61, 0.42)';
+border4: 'rgba(230, 57, 155, 0.4)';
+border5: 'rgba(157, 91, 232, 0.45)';
+border6: 'rgba(37, 208, 192, 0.42)';
+border7: 'rgba(62, 123, 246, 0.4)';
+background1: 'rgba(157, 91, 232, 0.16)';
+background2: 'rgba(48, 242, 132, 0.16)';
+background3: 'rgba(255, 168, 61, 0.16)';
+background4: 'rgba(230, 57, 155, 0.14)';
+background5: 'rgba(157, 91, 232, 0.16)';
+background6: 'rgba(37, 208, 192, 0.16)';
+background7: 'rgba(62, 123, 246, 0.16)';
+};
+};
+
+export declare const avatar: Avatar;
+
+export type Input = {
+radio: '#73aaff';
+checkbox: '#73aaff';
+hoverBackground: '#222229';
+background: '#222229';
+disabledBackground: '#222229';
+};
+
+export declare const input: Input;
+
+export type Buttons = {
+primary: {
+hover: '#fbfaf6';
+disabled: '#2d2d36';
+pressed: '#fbfaf6';
+default: '#f1f0ea';
+};
+secondary: {
+defaultBorder: 'rgba(240, 240, 246, 0.38)';
+hoverBackground: '#2a2a32';
+pressedBackground: '#33333d';
+disabledBackground: '#222229';
+defaultBackground: '#222229';
+default: '#f1f0ea';
+};
+tertiary: {
+default: '#f1f0ea';
+hover: '#f1f0ea';
+pressed: '#f1f0ea';
+disabled: '#9c9ca8';
+};
+destructive: '#fa826f';
+navigation: {
+active: 'rgba(127, 169, 249, 0.16)';
+defaultBorder: 'rgba(127, 169, 249, 0.4)';
+hoverBackground: 'rgba(127, 169, 249, 0.16)';
+pressedBackground: 'rgba(127, 169, 249, 0.16)';
+activeBorder: '#7fa9f9';
+};
+};
+
+export declare const buttons: Buttons;
+
+export type Activity = {
+recipeRun: '#9d5be8';
+commitJob: '#7fa9f9';
+visualization: '#25d0c0';
+};
+
+export declare const activity: Activity;
+
+export type Tab = {
+secondaryBackground: '#2d2d36';
+};
+
+export declare const tab: Tab;
+
+export type Code = {
+background: '#2a2a32';
+};
+
+export declare const code: Code;
+
+export declare const brand: '#7fa9f9';
+
+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;