@putdotio/design 0.1.0-alpha.0

package/dist/figma/putio.tokens.json

@@ -0,0 +1,591 @@
+{
+  "component": {
+    "button": {
+      "primary": {
+        "background": {
+          "$type": "color",
+          "$value": "#FDCE45",
+          "$description": "Primary command background."
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "#0A0A0A",
+          "$description": "Text or icon color on the yellow primary button."
+        },
+        "radius": {
+          "$type": "dimension",
+          "$value": "6px"
+        }
+      },
+      "secondary": {
+        "background": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 95.1%)"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 9.0%)"
+        }
+      }
+    },
+    "input": {
+      "background": {
+        "$type": "color",
+        "$value": "white"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 85.8%)"
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "6px"
+      }
+    },
+    "fileRow": {
+      "background": {
+        "$type": "color",
+        "$value": "transparent"
+      },
+      "hoverBackground": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 97.3%)"
+      },
+      "icon": {
+        "$type": "color",
+        "$value": "#FDCE45"
+      }
+    },
+    "notification": {
+      "infoBackground": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 97.3%)"
+      },
+      "dangerBackground": {
+        "$type": "color",
+        "$value": "hsl(360, 100%, 96.8%)"
+      }
+    }
+  },
+  "color": {
+    "brand": {
+      "yellow": {
+        "$type": "color",
+        "$value": "#FDCE45",
+        "$description": "Sacred put.io brand yellow. Do not change or tint."
+      }
+    },
+    "neutral": {
+      "light": {
+        "bg": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 99.0%)"
+        },
+        "bgSecondary": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 97.3%)"
+        },
+        "componentBg": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 95.1%)"
+        },
+        "componentBgHover": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 93.0%)"
+        },
+        "componentBgActive": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 90.9%)"
+        },
+        "line": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 88.7%)"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 85.8%)"
+        },
+        "borderHover": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 78.0%)"
+        },
+        "solid": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 56.1%)"
+        },
+        "solidHover": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 52.3%)"
+        },
+        "textSecondary": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 43.5%)"
+        },
+        "text": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 9.0%)"
+        }
+      }
+    },
+    "green": {
+      "light": {
+        "bg": {
+          "$type": "color",
+          "$value": "hsl(136, 50.0%, 98.9%)"
+        },
+        "bgSecondary": {
+          "$type": "color",
+          "$value": "hsl(138, 62.5%, 96.9%)"
+        },
+        "componentBg": {
+          "$type": "color",
+          "$value": "hsl(139, 55.2%, 94.5%)"
+        },
+        "componentBgHover": {
+          "$type": "color",
+          "$value": "hsl(140, 48.7%, 91.0%)"
+        },
+        "componentBgActive": {
+          "$type": "color",
+          "$value": "hsl(141, 43.7%, 86.0%)"
+        },
+        "line": {
+          "$type": "color",
+          "$value": "hsl(143, 40.3%, 79.0%)"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "hsl(146, 38.5%, 69.0%)"
+        },
+        "borderHover": {
+          "$type": "color",
+          "$value": "hsl(151, 40.2%, 54.1%)"
+        },
+        "solid": {
+          "$type": "color",
+          "$value": "hsl(151, 55.0%, 41.5%)"
+        },
+        "solidHover": {
+          "$type": "color",
+          "$value": "hsl(152, 57.5%, 37.6%)"
+        },
+        "textSecondary": {
+          "$type": "color",
+          "$value": "hsl(153, 67.0%, 28.5%)"
+        },
+        "text": {
+          "$type": "color",
+          "$value": "hsl(155, 40.0%, 14.0%)"
+        }
+      }
+    },
+    "red": {
+      "light": {
+        "bg": {
+          "$type": "color",
+          "$value": "hsl(359, 100%, 99.4%)"
+        },
+        "bgSecondary": {
+          "$type": "color",
+          "$value": "hsl(359, 100%, 98.6%)"
+        },
+        "componentBg": {
+          "$type": "color",
+          "$value": "hsl(360, 100%, 96.8%)"
+        },
+        "componentBgHover": {
+          "$type": "color",
+          "$value": "hsl(360, 97.9%, 94.8%)"
+        },
+        "componentBgActive": {
+          "$type": "color",
+          "$value": "hsl(360, 90.2%, 91.9%)"
+        },
+        "line": {
+          "$type": "color",
+          "$value": "hsl(360, 81.7%, 87.8%)"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "hsl(359, 74.2%, 81.7%)"
+        },
+        "borderHover": {
+          "$type": "color",
+          "$value": "hsl(359, 69.5%, 74.3%)"
+        },
+        "solid": {
+          "$type": "color",
+          "$value": "hsl(358, 75.0%, 59.0%)"
+        },
+        "solidHover": {
+          "$type": "color",
+          "$value": "hsl(358, 69.4%, 55.2%)"
+        },
+        "textSecondary": {
+          "$type": "color",
+          "$value": "hsl(358, 65.0%, 48.7%)"
+        },
+        "text": {
+          "$type": "color",
+          "$value": "hsl(354, 50.0%, 14.6%)"
+        }
+      }
+    },
+    "yellow": {
+      "light": {
+        "bg": {
+          "$type": "color",
+          "$value": "hsl(60, 54.0%, 98.5%)"
+        },
+        "bgSecondary": {
+          "$type": "color",
+          "$value": "hsl(52, 100%, 95.5%)"
+        },
+        "componentBg": {
+          "$type": "color",
+          "$value": "hsl(55, 100%, 90.9%)"
+        },
+        "componentBgHover": {
+          "$type": "color",
+          "$value": "hsl(54, 100%, 86.6%)"
+        },
+        "componentBgActive": {
+          "$type": "color",
+          "$value": "hsl(52, 97.9%, 82.0%)"
+        },
+        "line": {
+          "$type": "color",
+          "$value": "hsl(50, 89.4%, 76.1%)"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "hsl(47, 80.4%, 68.0%)"
+        },
+        "borderHover": {
+          "$type": "color",
+          "$value": "hsl(48, 100%, 46.1%)"
+        },
+        "solidHover": {
+          "$type": "color",
+          "$value": "#FDCE45"
+        },
+        "textSecondary": {
+          "$type": "color",
+          "$value": "hsl(42, 100%, 29.0%)"
+        },
+        "text": {
+          "$type": "color",
+          "$value": "hsl(40, 55.0%, 13.5%)"
+        }
+      }
+    },
+    "transfer": {
+      "light": {
+        "lime3": {
+          "$type": "color",
+          "$value": "hsl(85, 76.0%, 92.3%)"
+        }
+      }
+    }
+  },
+  "elevation": {
+    "shadowColor": {
+      "$type": "color",
+      "$value": "hsl(0, 0%, 78.0%)"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "hsl(0, 0%, 78.0%)"
+    },
+    "focusColor": {
+      "$type": "color",
+      "$value": "hsla(47, 100%, 65%, 0.35)"
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "sans": {
+        "$type": "fontFamily",
+        "$value": "\"GT America\", sans-serif"
+      },
+      "display": {
+        "$type": "fontFamily",
+        "$value": "\"GT America\", sans-serif"
+      },
+      "uiMono": {
+        "$type": "fontFamily",
+        "$value": "\"GT America Mono\", monospace"
+      },
+      "mono": {
+        "$type": "fontFamily",
+        "$value": "\"Berkeley Mono\", \"GT America Mono\", monospace"
+      }
+    },
+    "fontSize": {
+      "xs": {
+        "$type": "dimension",
+        "$value": "0.75rem"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "0.8125rem"
+      },
+      "base": {
+        "$type": "dimension",
+        "$value": "0.875rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "1.125rem"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      },
+      "2xl": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "3xl": {
+        "$type": "dimension",
+        "$value": "3rem"
+      },
+      "4xl": {
+        "$type": "dimension",
+        "$value": "4rem"
+      },
+      "display": {
+        "$type": "dimension",
+        "$value": "6rem"
+      }
+    },
+    "lineHeight": {
+      "tight": {
+        "$type": "number",
+        "$value": "1.1"
+      },
+      "snug": {
+        "$type": "number",
+        "$value": "1.25"
+      },
+      "normal": {
+        "$type": "number",
+        "$value": "1.45"
+      },
+      "loose": {
+        "$type": "number",
+        "$value": "1.6"
+      }
+    },
+    "fontWeight": {
+      "regular": {
+        "$type": "fontWeight",
+        "$value": "400"
+      },
+      "medium": {
+        "$type": "fontWeight",
+        "$value": "500"
+      },
+      "bold": {
+        "$type": "fontWeight",
+        "$value": "700"
+      },
+      "black": {
+        "$type": "fontWeight",
+        "$value": "900"
+      }
+    },
+    "letterSpacing": {
+      "tight": {
+        "$type": "dimension",
+        "$value": "-0.02em"
+      },
+      "normal": {
+        "$type": "number",
+        "$value": "0"
+      },
+      "wide": {
+        "$type": "dimension",
+        "$value": "0.02em"
+      },
+      "uppercase": {
+        "$type": "dimension",
+        "$value": "0.08em"
+      }
+    }
+  },
+  "spacing": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0"
+    },
+    "1": {
+      "$type": "dimension",
+      "$value": "4px"
+    },
+    "2": {
+      "$type": "dimension",
+      "$value": "8px"
+    },
+    "3": {
+      "$type": "dimension",
+      "$value": "16px"
+    },
+    "4": {
+      "$type": "dimension",
+      "$value": "32px"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "64px"
+    },
+    "6": {
+      "$type": "dimension",
+      "$value": "128px"
+    },
+    "7": {
+      "$type": "dimension",
+      "$value": "256px"
+    },
+    "8": {
+      "$type": "dimension",
+      "$value": "512px"
+    }
+  },
+  "radius": {
+    "sm": {
+      "$type": "dimension",
+      "$value": "4px"
+    },
+    "default": {
+      "$type": "dimension",
+      "$value": "6px"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "8px"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "10px"
+    },
+    "pill": {
+      "$type": "dimension",
+      "$value": "999px"
+    }
+  },
+  "border": {
+    "width": {
+      "$type": "dimension",
+      "$value": "1px"
+    }
+  },
+  "motion": {
+    "duration": {
+      "fast": {
+        "$type": "duration",
+        "$value": "120ms"
+      },
+      "base": {
+        "$type": "duration",
+        "$value": "200ms"
+      },
+      "slow": {
+        "$type": "duration",
+        "$value": "320ms"
+      }
+    }
+  },
+  "surface": {
+    "light": {
+      "htmlBg": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 97.3%)"
+      },
+      "appBg": {
+        "$type": "color",
+        "$value": "white"
+      },
+      "navBg": {
+        "$type": "color",
+        "$value": "white"
+      },
+      "navItemBg": {
+        "$type": "color",
+        "$value": "transparent"
+      },
+      "navItemBgHover": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 95.1%)"
+      },
+      "navItemBgActive": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 95.1%)"
+      },
+      "listItemBg": {
+        "$type": "color",
+        "$value": "transparent"
+      },
+      "listItemBgHover": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 97.3%)"
+      },
+      "listItemBgActive": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 97.3%)"
+      },
+      "listItemBorder": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 90.9%)"
+      },
+      "segmentedControlBg": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 95.1%)"
+      },
+      "segmentedControlBgActive": {
+        "$type": "color",
+        "$value": "white"
+      },
+      "transferListItemCompletingBg": {
+        "$type": "color",
+        "$value": "hsl(85, 76.0%, 92.3%)"
+      },
+      "transferListItemDownloadingBg": {
+        "$type": "color",
+        "$value": "hsl(85, 76.0%, 92.3%)"
+      },
+      "transferListItemFinishedBg": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 97.3%)"
+      },
+      "transferListItemPassiveBg": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 99.0%)"
+      },
+      "hiContrast": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 9.0%)"
+      },
+      "loContrast": {
+        "$type": "color",
+        "$value": "hsl(0, 0%, 99.0%)"
+      },
+      "transparent": {
+        "$type": "color",
+        "$value": "transparent"
+      },
+      "overlayInline": {
+        "$type": "color",
+        "$value": "hsla(0, 0%, 0%, 0.047)"
+      },
+      "overlayFull": {
+        "$type": "color",
+        "$value": "hsla(0, 0%, 0%, 0.439)"
+      }
+    }
+  }
+}

package/dist/tokens.d.ts

@@ -0,0 +1,14 @@
+// Do not edit directly. Generated from tokens/**/*.tokens.json.
+
+export type PutioTokenName = "component.button.primary.background" | "component.button.primary.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "context.tv.surface.0" | "context.tv.surface.1" | "context.tv.surface.2" | "context.tv.surface.3" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.glass.1" | "context.tv.glass.2" | "context.tv.glass.3" | "context.tv.glass.border" | "context.tv.glass.borderStrong" | "context.tv.focus.ring" | "context.tv.focus.liftShadow" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.uiMono" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.base" | "motion.duration.slow" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
+
+export type PutioToken = {
+  readonly cssName: string;
+  readonly type: string;
+  readonly mode: "light" | "dark" | "global" | "tv";
+  readonly value: string | number;
+  readonly originalValue: string | number;
+  readonly description?: string;
+};
+
+export declare const tokens: Readonly<Record<PutioTokenName, PutioToken>>;