@brunosouzas/design-system 0.0.0-stage → 0.1.0

package/tokens/generated/tokens.css

@@ -0,0 +1,160 @@
+/* Generated from tokens/source.json by scripts/tokens.ts (npm run tokens). Do not edit by hand. */
+:root {
+  --ds-color-backend: #FF6B6B;
+  --ds-color-blocked: #FF8A3D;
+  --ds-color-caller: #8FB2FF;
+  --ds-color-fail-fast: #E0661F;
+  --ds-color-failure: #E04848;
+  --ds-color-healthy: #3DDC84;
+  --ds-color-ink: #0A1033;
+  --ds-color-panel: #EEF2FF;
+  --ds-color-ring: #E0E7FB;
+  --ds-color-transitional: #FFD25A;
+  --ds-color-white: #FFFFFF;
+  --ds-cover-height: 420px;
+  --ds-cover-label-size: 19px;
+  --ds-cover-label-weight: 800;
+  --ds-cover-pill-height: 36px;
+  --ds-cover-ring-radius: 90px;
+  --ds-cover-ring-step: 28px;
+  --ds-cover-ring-width: 2px;
+  --ds-cover-width: 800px;
+  --ds-cover-background-blush-fill: #F6CFE0;
+  --ds-cover-background-blush-ring: #ECBAD0;
+  --ds-cover-background-cobalt-fill: #1E4FA0;
+  --ds-cover-background-cobalt-ring: #2758AE;
+  --ds-cover-background-cream-fill: #FFF1C9;
+  --ds-cover-background-cream-ring: #F4E2AE;
+  --ds-cover-background-deep-teal-fill: #0F6E6E;
+  --ds-cover-background-deep-teal-ring: #167A79;
+  --ds-cover-background-emerald-fill: #2F9E6E;
+  --ds-cover-background-emerald-ring: #38AB79;
+  --ds-cover-background-forest-fill: #24604F;
+  --ds-cover-background-forest-ring: #2B6E5B;
+  --ds-cover-background-lavender-fill: #B8A6F0;
+  --ds-cover-background-lavender-ring: #AC98EA;
+  --ds-cover-background-lime-fill: #D4EC9C;
+  --ds-cover-background-lime-ring: #C4E086;
+  --ds-cover-background-mint-fill: #CDE5D3;
+  --ds-cover-background-mint-ring: #BCDAC4;
+  --ds-cover-background-mustard-fill: #F2C14E;
+  --ds-cover-background-mustard-ring: #E6B33E;
+  --ds-cover-background-navy-fill: #14215A;
+  --ds-cover-background-navy-ring: #1C2D74;
+  --ds-cover-background-olive-fill: #8A9A3B;
+  --ds-cover-background-olive-ring: #7E8E33;
+  --ds-cover-background-peach-fill: #F4D8BC;
+  --ds-cover-background-peach-ring: #EAC7A3;
+  --ds-cover-background-plum-fill: #3D2B66;
+  --ds-cover-background-plum-ring: #483577;
+  --ds-cover-background-raspberry-fill: #C94F7C;
+  --ds-cover-background-raspberry-ring: #BE4572;
+  --ds-cover-background-salmon-fill: #FF9E7A;
+  --ds-cover-background-salmon-ring: #F48D68;
+  --ds-cover-background-sky-fill: #BFE3F7;
+  --ds-cover-background-sky-ring: #AAD5EC;
+  --ds-cover-background-slate-fill: #2E3A59;
+  --ds-cover-background-slate-ring: #38466A;
+  --ds-cover-background-teal-fill: #1F8A8A;
+  --ds-cover-background-teal-ring: #2A9A99;
+  --ds-cover-background-violet-fill: #5B3CC4;
+  --ds-cover-background-violet-ring: #6748CF;
+  --ds-cover-background-wine-fill: #6B2340;
+  --ds-cover-background-wine-ring: #7A2D4C;
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  --ds-font-sans: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --ds-font-weight-bold: 700;
+  --ds-font-weight-heavy: 900;
+  --ds-illustration-accent: #1E6FEB;
+  --ds-illustration-code-panel: #14215A;
+  --ds-illustration-healthy-shade: #2BB673;
+  --ds-illustration-icon-line: #B9C3E0;
+  --ds-illustration-road: #5B6478;
+  --ds-illustration-tape: #FFE2C8;
+  --ds-illustration-text-bar: #C9D6F5;
+  --ds-illustration-transitional-shade: #E8B830;
+  --ds-map-badge-height: 20px;
+  --ds-map-badge-text-size: 12px;
+  --ds-map-casing: 6px;
+  --ds-map-count-height: 16px;
+  --ds-map-count-text-size: 11px;
+  --ds-map-edge-width: 2.5px;
+  --ds-map-interchange-extra: 2px;
+  --ds-map-label-size: 13px;
+  --ds-map-line-width: 12px;
+  --ds-map-node-height: 46px;
+  --ds-map-node-radius: 10px;
+  --ds-map-outline: 3px;
+  --ds-map-shadow: 3.5px;
+  --ds-map-stop-radius: 12px;
+  --ds-motion-dim-opacity: 0.42;
+  --ds-motion-draw-arrow: 20;
+  --ds-motion-fade: 10;
+  --ds-motion-focus-damping: 200;
+  --ds-motion-focus-mass: 1;
+  --ds-motion-focus-stiffness: 120;
+  --ds-motion-focus-scale: 1.06;
+  --ds-motion-fps: 30;
+  --ds-motion-pop-damping: 13;
+  --ds-motion-pop-mass: 0.7;
+  --ds-motion-pop-stiffness: 140;
+  --ds-motion-reading-hold: 90;
+  --ds-motion-travel: 22;
+  --ds-outline-arrow: 4px;
+  --ds-outline-block: 4px;
+  --ds-outline-small: 3px;
+  --ds-radius-block: 18px;
+  --ds-radius-pill: 22px;
+  --ds-radius-small: 6px;
+  --ds-shadow-block: 10px;
+  --ds-shadow-pill: 6px;
+  --ds-shadow-small: 4px;
+  --ds-site-dark-body: #1C1C1C;
+  --ds-site-dark-border: #3E3E3E;
+  --ds-site-dark-dark: #FFFFFF;
+  --ds-site-dark-light: #222222;
+  --ds-site-dark-primary: #FFFFFF;
+  --ds-site-dark-text: #B4AFB6;
+  --ds-site-dark-text-dark: #FFFFFF;
+  --ds-site-dark-text-light: #B4AFB6;
+  --ds-site-font-primary: Heebo, sans-serif;
+  --ds-site-font-secondary: Signika, sans-serif;
+  --ds-site-font-size-base: 16px;
+  --ds-site-font-size-base-small: 12.8px;
+  --ds-site-heading-h1: 2.985984;
+  --ds-site-heading-h1-small: 2.6873856;
+  --ds-site-heading-h2: 2.48832;
+  --ds-site-heading-h2-small: 2.239488;
+  --ds-site-heading-h3: 2.0736;
+  --ds-site-heading-h3-small: 1.86624;
+  --ds-site-heading-h4: 1.728;
+  --ds-site-heading-h4-small: 1.5552;
+  --ds-site-heading-h5: 1.44;
+  --ds-site-heading-h5-small: 1.296;
+  --ds-site-heading-h6: 1.2;
+  --ds-site-heading-h6-small: 1.08;
+  --ds-site-light-body: #FFFFFF;
+  --ds-site-light-border: #EAEAEA;
+  --ds-site-light-dark: #040404;
+  --ds-site-light-light: #F6F6F6;
+  --ds-site-light-primary: #121212;
+  --ds-site-light-text: #444444;
+  --ds-site-light-text-dark: #040404;
+  --ds-site-light-text-light: #717171;
+  --ds-surface-dark-background: #14215A;
+  --ds-surface-dark-grid: #1C2D74;
+  --ds-surface-dark-muted: #8F9BD0;
+  --ds-surface-dark-panel: #1C2D74;
+  --ds-surface-dark-rim: #EEF2FF;
+  --ds-surface-dark-rim-width: 1px;
+  --ds-surface-dark-shadow: #4C5CB8;
+  --ds-surface-dark-text: #EEF2FF;
+  --ds-surface-light-background: #EEF2FF;
+  --ds-surface-light-grid: #E0E7FB;
+  --ds-surface-light-muted: #5B6694;
+  --ds-surface-light-panel: #FFFFFF;
+  --ds-surface-light-rim: #EEF2FF;
+  --ds-surface-light-rim-width: 0px;
+  --ds-surface-light-shadow: #0A1033;
+  --ds-surface-light-text: #0A1033;
+}

package/tokens/generated/tokens.json

@@ -0,0 +1,243 @@
+{
+  "color": {
+    "backend": "#FF6B6B",
+    "blocked": "#FF8A3D",
+    "caller": "#8FB2FF",
+    "failFast": "#E0661F",
+    "failure": "#E04848",
+    "healthy": "#3DDC84",
+    "ink": "#0A1033",
+    "panel": "#EEF2FF",
+    "ring": "#E0E7FB",
+    "transitional": "#FFD25A",
+    "white": "#FFFFFF"
+  },
+  "cover": {
+    "height": 420,
+    "labelSize": 19,
+    "labelWeight": 800,
+    "pillHeight": 36,
+    "ringRadius": 90,
+    "ringStep": 28,
+    "ringWidth": 2,
+    "width": 800
+  },
+  "coverBackground": {
+    "blush": {
+      "fill": "#F6CFE0",
+      "ring": "#ECBAD0"
+    },
+    "cobalt": {
+      "fill": "#1E4FA0",
+      "ring": "#2758AE"
+    },
+    "cream": {
+      "fill": "#FFF1C9",
+      "ring": "#F4E2AE"
+    },
+    "deepTeal": {
+      "fill": "#0F6E6E",
+      "ring": "#167A79"
+    },
+    "emerald": {
+      "fill": "#2F9E6E",
+      "ring": "#38AB79"
+    },
+    "forest": {
+      "fill": "#24604F",
+      "ring": "#2B6E5B"
+    },
+    "lavender": {
+      "fill": "#B8A6F0",
+      "ring": "#AC98EA"
+    },
+    "lime": {
+      "fill": "#D4EC9C",
+      "ring": "#C4E086"
+    },
+    "mint": {
+      "fill": "#CDE5D3",
+      "ring": "#BCDAC4"
+    },
+    "mustard": {
+      "fill": "#F2C14E",
+      "ring": "#E6B33E"
+    },
+    "navy": {
+      "fill": "#14215A",
+      "ring": "#1C2D74"
+    },
+    "olive": {
+      "fill": "#8A9A3B",
+      "ring": "#7E8E33"
+    },
+    "peach": {
+      "fill": "#F4D8BC",
+      "ring": "#EAC7A3"
+    },
+    "plum": {
+      "fill": "#3D2B66",
+      "ring": "#483577"
+    },
+    "raspberry": {
+      "fill": "#C94F7C",
+      "ring": "#BE4572"
+    },
+    "salmon": {
+      "fill": "#FF9E7A",
+      "ring": "#F48D68"
+    },
+    "sky": {
+      "fill": "#BFE3F7",
+      "ring": "#AAD5EC"
+    },
+    "slate": {
+      "fill": "#2E3A59",
+      "ring": "#38466A"
+    },
+    "teal": {
+      "fill": "#1F8A8A",
+      "ring": "#2A9A99"
+    },
+    "violet": {
+      "fill": "#5B3CC4",
+      "ring": "#6748CF"
+    },
+    "wine": {
+      "fill": "#6B2340",
+      "ring": "#7A2D4C"
+    }
+  },
+  "font": {
+    "mono": "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
+    "sans": "Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    "weightBold": 700,
+    "weightHeavy": 900
+  },
+  "illustration": {
+    "accent": "#1E6FEB",
+    "codePanel": "#14215A",
+    "healthyShade": "#2BB673",
+    "iconLine": "#B9C3E0",
+    "road": "#5B6478",
+    "tape": "#FFE2C8",
+    "textBar": "#C9D6F5",
+    "transitionalShade": "#E8B830"
+  },
+  "map": {
+    "badgeHeight": 20,
+    "badgeTextSize": 12,
+    "casing": 6,
+    "countHeight": 16,
+    "countTextSize": 11,
+    "edgeWidth": 2.5,
+    "interchangeExtra": 2,
+    "labelSize": 13,
+    "lineWidth": 12,
+    "nodeHeight": 46,
+    "nodeRadius": 10,
+    "outline": 3,
+    "shadow": 3.5,
+    "stopRadius": 12
+  },
+  "motion": {
+    "dimOpacity": 0.42,
+    "drawArrow": 20,
+    "fade": 10,
+    "focus": {
+      "damping": 200,
+      "mass": 1,
+      "stiffness": 120
+    },
+    "focusScale": 1.06,
+    "fps": 30,
+    "pop": {
+      "damping": 13,
+      "mass": 0.7,
+      "stiffness": 140
+    },
+    "readingHold": 90,
+    "travel": 22
+  },
+  "outline": {
+    "arrow": 4,
+    "block": 4,
+    "small": 3
+  },
+  "radius": {
+    "block": 18,
+    "pill": 22,
+    "small": 6
+  },
+  "shadow": {
+    "block": 10,
+    "pill": 6,
+    "small": 4
+  },
+  "site": {
+    "dark": {
+      "body": "#1C1C1C",
+      "border": "#3E3E3E",
+      "dark": "#FFFFFF",
+      "light": "#222222",
+      "primary": "#FFFFFF",
+      "text": "#B4AFB6",
+      "textDark": "#FFFFFF",
+      "textLight": "#B4AFB6"
+    },
+    "font": {
+      "primary": "Heebo, sans-serif",
+      "secondary": "Signika, sans-serif"
+    },
+    "fontSize": {
+      "base": 16,
+      "baseSmall": 12.8
+    },
+    "heading": {
+      "h1": 2.985984,
+      "h1Small": 2.6873856,
+      "h2": 2.48832,
+      "h2Small": 2.239488,
+      "h3": 2.0736,
+      "h3Small": 1.86624,
+      "h4": 1.728,
+      "h4Small": 1.5552,
+      "h5": 1.44,
+      "h5Small": 1.296,
+      "h6": 1.2,
+      "h6Small": 1.08
+    },
+    "light": {
+      "body": "#FFFFFF",
+      "border": "#EAEAEA",
+      "dark": "#040404",
+      "light": "#F6F6F6",
+      "primary": "#121212",
+      "text": "#444444",
+      "textDark": "#040404",
+      "textLight": "#717171"
+    }
+  },
+  "surface": {
+    "dark": {
+      "background": "#14215A",
+      "grid": "#1C2D74",
+      "muted": "#8F9BD0",
+      "panel": "#1C2D74",
+      "rim": "#EEF2FF",
+      "rimWidth": 1,
+      "shadow": "#4C5CB8",
+      "text": "#EEF2FF"
+    },
+    "light": {
+      "background": "#EEF2FF",
+      "grid": "#E0E7FB",
+      "muted": "#5B6694",
+      "panel": "#FFFFFF",
+      "rim": "#EEF2FF",
+      "rimWidth": 0,
+      "shadow": "#0A1033",
+      "text": "#0A1033"
+    }
+  }
+}

package/tokens/generated/tokens.ts

@@ -0,0 +1,247 @@
+// Generated from tokens/source.json by scripts/tokens.ts (npm run tokens). Do not edit by hand.
+
+export const tokens = {
+  "color": {
+    "backend": "#FF6B6B",
+    "blocked": "#FF8A3D",
+    "caller": "#8FB2FF",
+    "failFast": "#E0661F",
+    "failure": "#E04848",
+    "healthy": "#3DDC84",
+    "ink": "#0A1033",
+    "panel": "#EEF2FF",
+    "ring": "#E0E7FB",
+    "transitional": "#FFD25A",
+    "white": "#FFFFFF"
+  },
+  "cover": {
+    "height": 420,
+    "labelSize": 19,
+    "labelWeight": 800,
+    "pillHeight": 36,
+    "ringRadius": 90,
+    "ringStep": 28,
+    "ringWidth": 2,
+    "width": 800
+  },
+  "coverBackground": {
+    "blush": {
+      "fill": "#F6CFE0",
+      "ring": "#ECBAD0"
+    },
+    "cobalt": {
+      "fill": "#1E4FA0",
+      "ring": "#2758AE"
+    },
+    "cream": {
+      "fill": "#FFF1C9",
+      "ring": "#F4E2AE"
+    },
+    "deepTeal": {
+      "fill": "#0F6E6E",
+      "ring": "#167A79"
+    },
+    "emerald": {
+      "fill": "#2F9E6E",
+      "ring": "#38AB79"
+    },
+    "forest": {
+      "fill": "#24604F",
+      "ring": "#2B6E5B"
+    },
+    "lavender": {
+      "fill": "#B8A6F0",
+      "ring": "#AC98EA"
+    },
+    "lime": {
+      "fill": "#D4EC9C",
+      "ring": "#C4E086"
+    },
+    "mint": {
+      "fill": "#CDE5D3",
+      "ring": "#BCDAC4"
+    },
+    "mustard": {
+      "fill": "#F2C14E",
+      "ring": "#E6B33E"
+    },
+    "navy": {
+      "fill": "#14215A",
+      "ring": "#1C2D74"
+    },
+    "olive": {
+      "fill": "#8A9A3B",
+      "ring": "#7E8E33"
+    },
+    "peach": {
+      "fill": "#F4D8BC",
+      "ring": "#EAC7A3"
+    },
+    "plum": {
+      "fill": "#3D2B66",
+      "ring": "#483577"
+    },
+    "raspberry": {
+      "fill": "#C94F7C",
+      "ring": "#BE4572"
+    },
+    "salmon": {
+      "fill": "#FF9E7A",
+      "ring": "#F48D68"
+    },
+    "sky": {
+      "fill": "#BFE3F7",
+      "ring": "#AAD5EC"
+    },
+    "slate": {
+      "fill": "#2E3A59",
+      "ring": "#38466A"
+    },
+    "teal": {
+      "fill": "#1F8A8A",
+      "ring": "#2A9A99"
+    },
+    "violet": {
+      "fill": "#5B3CC4",
+      "ring": "#6748CF"
+    },
+    "wine": {
+      "fill": "#6B2340",
+      "ring": "#7A2D4C"
+    }
+  },
+  "font": {
+    "mono": "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
+    "sans": "Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    "weightBold": 700,
+    "weightHeavy": 900
+  },
+  "illustration": {
+    "accent": "#1E6FEB",
+    "codePanel": "#14215A",
+    "healthyShade": "#2BB673",
+    "iconLine": "#B9C3E0",
+    "road": "#5B6478",
+    "tape": "#FFE2C8",
+    "textBar": "#C9D6F5",
+    "transitionalShade": "#E8B830"
+  },
+  "map": {
+    "badgeHeight": 20,
+    "badgeTextSize": 12,
+    "casing": 6,
+    "countHeight": 16,
+    "countTextSize": 11,
+    "edgeWidth": 2.5,
+    "interchangeExtra": 2,
+    "labelSize": 13,
+    "lineWidth": 12,
+    "nodeHeight": 46,
+    "nodeRadius": 10,
+    "outline": 3,
+    "shadow": 3.5,
+    "stopRadius": 12
+  },
+  "motion": {
+    "dimOpacity": 0.42,
+    "drawArrow": 20,
+    "fade": 10,
+    "focus": {
+      "damping": 200,
+      "mass": 1,
+      "stiffness": 120
+    },
+    "focusScale": 1.06,
+    "fps": 30,
+    "pop": {
+      "damping": 13,
+      "mass": 0.7,
+      "stiffness": 140
+    },
+    "readingHold": 90,
+    "travel": 22
+  },
+  "outline": {
+    "arrow": 4,
+    "block": 4,
+    "small": 3
+  },
+  "radius": {
+    "block": 18,
+    "pill": 22,
+    "small": 6
+  },
+  "shadow": {
+    "block": 10,
+    "pill": 6,
+    "small": 4
+  },
+  "site": {
+    "dark": {
+      "body": "#1C1C1C",
+      "border": "#3E3E3E",
+      "dark": "#FFFFFF",
+      "light": "#222222",
+      "primary": "#FFFFFF",
+      "text": "#B4AFB6",
+      "textDark": "#FFFFFF",
+      "textLight": "#B4AFB6"
+    },
+    "font": {
+      "primary": "Heebo, sans-serif",
+      "secondary": "Signika, sans-serif"
+    },
+    "fontSize": {
+      "base": 16,
+      "baseSmall": 12.8
+    },
+    "heading": {
+      "h1": 2.985984,
+      "h1Small": 2.6873856,
+      "h2": 2.48832,
+      "h2Small": 2.239488,
+      "h3": 2.0736,
+      "h3Small": 1.86624,
+      "h4": 1.728,
+      "h4Small": 1.5552,
+      "h5": 1.44,
+      "h5Small": 1.296,
+      "h6": 1.2,
+      "h6Small": 1.08
+    },
+    "light": {
+      "body": "#FFFFFF",
+      "border": "#EAEAEA",
+      "dark": "#040404",
+      "light": "#F6F6F6",
+      "primary": "#121212",
+      "text": "#444444",
+      "textDark": "#040404",
+      "textLight": "#717171"
+    }
+  },
+  "surface": {
+    "dark": {
+      "background": "#14215A",
+      "grid": "#1C2D74",
+      "muted": "#8F9BD0",
+      "panel": "#1C2D74",
+      "rim": "#EEF2FF",
+      "rimWidth": 1,
+      "shadow": "#4C5CB8",
+      "text": "#EEF2FF"
+    },
+    "light": {
+      "background": "#EEF2FF",
+      "grid": "#E0E7FB",
+      "muted": "#5B6694",
+      "panel": "#FFFFFF",
+      "rim": "#EEF2FF",
+      "rimWidth": 0,
+      "shadow": "#0A1033",
+      "text": "#0A1033"
+    }
+  }
+} as const;
+
+export type Tokens = typeof tokens;