@tiendanube/design-tokens-nimbus
Version:
Tiendanube's design tokens
755 lines (753 loc) • 16.4 kB
JavaScript
/**
* Do not edit directly
* Generated on Tue, 12 Jul 2022 18:03:13 GMT
*/
module.exports = {
breakpoint: {
xs: {
margin: {
value: "16px",
original: {
value: "16px",
},
name: "BreakpointXsMargin",
attributes: {
category: "breakpoint",
type: "xs",
item: "margin",
},
path: ["breakpoint", "xs", "margin"],
},
width: {
value: 0,
original: {
value: 0,
},
name: "BreakpointXsWidth",
attributes: {
category: "breakpoint",
type: "xs",
item: "width",
},
path: ["breakpoint", "xs", "width"],
},
},
md: {
margin: {
value: "24px",
original: {
value: "24px",
},
name: "BreakpointMdMargin",
attributes: {
category: "breakpoint",
type: "md",
item: "margin",
},
path: ["breakpoint", "md", "margin"],
},
width: {
value: "672px",
original: {
value: "672px",
},
name: "BreakpointMdWidth",
attributes: {
category: "breakpoint",
type: "md",
item: "width",
},
path: ["breakpoint", "md", "width"],
},
},
lg: {
margin: {
value: "24px",
original: {
value: "24px",
},
name: "BreakpointLgMargin",
attributes: {
category: "breakpoint",
type: "lg",
item: "margin",
},
path: ["breakpoint", "lg", "margin"],
},
width: {
value: "1024px",
original: {
value: "1024px",
},
name: "BreakpointLgWidth",
attributes: {
category: "breakpoint",
type: "lg",
item: "width",
},
path: ["breakpoint", "lg", "width"],
},
},
},
color: {
blue: {
"dark-pure": {
value: "#2c3357",
original: {
value: "#2C3357",
},
name: "ColorBlueDarkPure",
attributes: {
category: "color",
type: "blue",
item: "dark-pure",
},
path: ["color", "blue", "dark-pure"],
},
"dark-light": {
value: "#c9cde4",
original: {
value: "#C9CDE4",
},
name: "ColorBlueDarkLight",
attributes: {
category: "color",
type: "blue",
item: "dark-light",
},
path: ["color", "blue", "dark-light"],
},
"dark-lighter": {
value: "#eef1f7",
original: {
value: "#EEF1F7",
},
name: "ColorBlueDarkLighter",
attributes: {
category: "color",
type: "blue",
item: "dark-lighter",
},
path: ["color", "blue", "dark-lighter"],
},
"primary-pure": {
value: "#0272d5",
original: {
value: "#0272D5",
},
name: "ColorBluePrimaryPure",
attributes: {
category: "color",
type: "blue",
item: "primary-pure",
},
path: ["color", "blue", "primary-pure"],
},
"primary-light": {
value: "#aed9fe",
original: {
value: "#AED9FE",
},
name: "ColorBluePrimaryLight",
attributes: {
category: "color",
type: "blue",
item: "primary-light",
},
path: ["color", "blue", "primary-light"],
},
"primary-lighter": {
value: "#edf5fe",
original: {
value: "#EDF5FE",
},
name: "ColorBluePrimaryLighter",
attributes: {
category: "color",
type: "blue",
item: "primary-lighter",
},
path: ["color", "blue", "primary-lighter"],
},
},
"red-pure": {
value: "#d92a2d",
original: {
value: "#D92A2D",
},
name: "ColorRedPure",
attributes: {
category: "color",
type: "red-pure",
},
path: ["color", "red-pure"],
},
"red-light": {
value: "#f3b3b2",
original: {
value: "#F3B3B2",
},
name: "ColorRedLight",
attributes: {
category: "color",
type: "red-light",
},
path: ["color", "red-light"],
},
"red-lighter": {
value: "#fcebeb",
original: {
value: "#FCEBEB",
},
name: "ColorRedLighter",
attributes: {
category: "color",
type: "red-lighter",
},
path: ["color", "red-lighter"],
},
"yellow-pure": {
value: "#ffb337",
original: {
value: "#FFB337",
},
name: "ColorYellowPure",
attributes: {
category: "color",
type: "yellow-pure",
},
path: ["color", "yellow-pure"],
},
"yellow-light": {
value: "#ffe0ad",
original: {
value: "#FFE0AD",
},
name: "ColorYellowLight",
attributes: {
category: "color",
type: "yellow-light",
},
path: ["color", "yellow-light"],
},
"yellow-lighter": {
value: "#fff5e9",
original: {
value: "#FFF5E9",
},
name: "ColorYellowLighter",
attributes: {
category: "color",
type: "yellow-lighter",
},
path: ["color", "yellow-lighter"],
},
"green-pure": {
value: "#0ca76b",
original: {
value: "#0CA76B",
},
name: "ColorGreenPure",
attributes: {
category: "color",
type: "green-pure",
},
path: ["color", "green-pure"],
},
"green-light": {
value: "#b3fade",
original: {
value: "#B3FADE",
},
name: "ColorGreenLight",
attributes: {
category: "color",
type: "green-light",
},
path: ["color", "green-light"],
},
"green-lighter": {
value: "#effdf7",
original: {
value: "#EFFDF7",
},
name: "ColorGreenLighter",
attributes: {
category: "color",
type: "green-lighter",
},
path: ["color", "green-lighter"],
},
grey: {
"0": {
value: "#fafafa",
original: {
value: "#FAFAFA",
},
name: "ColorGrey0",
attributes: {
category: "color",
type: "grey",
item: "0",
},
path: ["color", "grey", "0"],
},
"25": {
value: "#ecebec",
original: {
value: "#ECEBEC",
},
name: "ColorGrey25",
attributes: {
category: "color",
type: "grey",
item: "25",
},
path: ["color", "grey", "25"],
},
"50": {
value: "#bfbbbd",
original: {
value: "#BFBBBD",
},
name: "ColorGrey50",
attributes: {
category: "color",
type: "grey",
item: "50",
},
path: ["color", "grey", "50"],
},
"75": {
value: "#62595d",
original: {
value: "#62595D",
},
name: "ColorGrey75",
attributes: {
category: "color",
type: "grey",
item: "75",
},
path: ["color", "grey", "75"],
},
"100": {
value: "#473c41",
original: {
value: "#473C41",
},
name: "ColorGrey100",
attributes: {
category: "color",
type: "grey",
item: "100",
},
path: ["color", "grey", "100"],
},
},
white: {
value: "#ffffff",
original: {
value: "#FFFFFF",
},
name: "ColorWhite",
attributes: {
category: "color",
type: "white",
},
path: ["color", "white"],
},
black: {
value: "#000000",
original: {
value: "#000000",
},
name: "ColorBlack",
attributes: {
category: "color",
type: "black",
},
path: ["color", "black"],
},
},
font: {
family: {
value:
"CentraNube,-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',arial,sans-serif",
original: {
value:
"CentraNube,-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',arial,sans-serif",
},
name: "FontFamily",
attributes: {
category: "font",
type: "family",
},
path: ["font", "family"],
},
weight: {
regular: {
value: "400",
original: {
value: "400",
},
name: "FontWeightRegular",
attributes: {
category: "font",
type: "weight",
item: "regular",
},
path: ["font", "weight", "regular"],
},
bold: {
value: "700",
original: {
value: "700",
},
name: "FontWeightBold",
attributes: {
category: "font",
type: "weight",
item: "bold",
},
path: ["font", "weight", "bold"],
},
},
size: {
"x-small": {
value: "12px",
original: {
value: "12px",
},
name: "FontSizeXSmall",
attributes: {
category: "font",
type: "size",
item: "x-small",
},
path: ["font", "size", "x-small"],
},
small: {
value: "14px",
original: {
value: "14px",
},
name: "FontSizeSmall",
attributes: {
category: "font",
type: "size",
item: "small",
},
path: ["font", "size", "small"],
},
medium: {
value: "16px",
original: {
value: "16px",
},
name: "FontSizeMedium",
attributes: {
category: "font",
type: "size",
item: "medium",
},
path: ["font", "size", "medium"],
},
large: {
value: "18px",
original: {
value: "18px",
},
name: "FontSizeLarge",
attributes: {
category: "font",
type: "size",
item: "large",
},
path: ["font", "size", "large"],
},
"x-large": {
value: "20px",
original: {
value: "20px",
},
name: "FontSizeXLarge",
attributes: {
category: "font",
type: "size",
item: "x-large",
},
path: ["font", "size", "x-large"],
},
"xx-large": {
value: "24px",
original: {
value: "24px",
},
name: "FontSizeXxLarge",
attributes: {
category: "font",
type: "size",
item: "xx-large",
},
path: ["font", "size", "xx-large"],
},
"xxx-large": {
value: "32px",
original: {
value: "32px",
},
name: "FontSizeXxxLarge",
attributes: {
category: "font",
type: "size",
item: "xxx-large",
},
path: ["font", "size", "xxx-large"],
},
},
"line-height": {
base: {
value: "100%",
original: {
value: "100%",
},
name: "FontLineHeightBase",
attributes: {
category: "font",
type: "line-height",
item: "base",
},
path: ["font", "line-height", "base"],
},
heading: {
value: "125%",
original: {
value: "125%",
},
name: "FontLineHeightHeading",
attributes: {
category: "font",
type: "line-height",
item: "heading",
},
path: ["font", "line-height", "heading"],
},
body: {
value: "150%",
original: {
value: "150%",
},
name: "FontLineHeightBody",
attributes: {
category: "font",
type: "line-height",
item: "body",
},
path: ["font", "line-height", "body"],
},
},
},
motion: {
fast: {
value: "150ms",
original: {
value: "150ms",
},
name: "MotionFast",
attributes: {
category: "motion",
type: "fast",
},
path: ["motion", "fast"],
},
base: {
value: "300ms",
original: {
value: "300ms",
},
name: "MotionBase",
attributes: {
category: "motion",
type: "base",
},
path: ["motion", "base"],
},
slow: {
value: "450ms",
original: {
value: "450ms",
},
name: "MotionSlow",
attributes: {
category: "motion",
type: "slow",
},
path: ["motion", "slow"],
},
slower: {
value: "600ms",
original: {
value: "600ms",
},
name: "MotionSlower",
attributes: {
category: "motion",
type: "slower",
},
path: ["motion", "slower"],
},
},
shadow: {
card: {
value: "0px 2px 1px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.25)",
original: {
value:
"0px 2px 1px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.25)",
},
name: "ShadowCard",
attributes: {
category: "shadow",
type: "card",
},
path: ["shadow", "card"],
},
popover: {
value: "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 3px 10px rgba(0, 0, 0, 0.1)",
original: {
value:
"0px 0px 2px rgba(0, 0, 0, 0.2), 0px 3px 10px rgba(0, 0, 0, 0.1)",
},
name: "ShadowPopover",
attributes: {
category: "shadow",
type: "popover",
},
path: ["shadow", "popover"],
},
modal: {
value:
"0px 20px 20px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04)",
original: {
value:
"0px 20px 20px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04)",
},
name: "ShadowModal",
attributes: {
category: "shadow",
type: "modal",
},
path: ["shadow", "modal"],
},
},
spacing: {
"xx-small": {
value: "4px",
original: {
value: "4px",
},
name: "SpacingXxSmall",
attributes: {
category: "spacing",
type: "xx-small",
},
path: ["spacing", "xx-small"],
},
"x-small": {
value: "8px",
original: {
value: "8px",
},
name: "SpacingXSmall",
attributes: {
category: "spacing",
type: "x-small",
},
path: ["spacing", "x-small"],
},
small: {
value: "16px",
original: {
value: "16px",
},
name: "SpacingSmall",
attributes: {
category: "spacing",
type: "small",
},
path: ["spacing", "small"],
},
medium: {
value: "24px",
original: {
value: "24px",
},
name: "SpacingMedium",
attributes: {
category: "spacing",
type: "medium",
},
path: ["spacing", "medium"],
},
large: {
value: "32px",
original: {
value: "32px",
},
name: "SpacingLarge",
attributes: {
category: "spacing",
type: "large",
},
path: ["spacing", "large"],
},
"x-large": {
value: "40px",
original: {
value: "40px",
},
name: "SpacingXLarge",
attributes: {
category: "spacing",
type: "x-large",
},
path: ["spacing", "x-large"],
},
"xx-large": {
value: "48px",
original: {
value: "48px",
},
name: "SpacingXxLarge",
attributes: {
category: "spacing",
type: "xx-large",
},
path: ["spacing", "xx-large"],
},
"xxx-large": {
value: "56px",
original: {
value: "56px",
},
name: "SpacingXxxLarge",
attributes: {
category: "spacing",
type: "xxx-large",
},
path: ["spacing", "xxx-large"],
},
gutter: {
value: "32px",
original: {
value: "32px",
},
name: "SpacingGutter",
attributes: {
category: "spacing",
type: "gutter",
},
path: ["spacing", "gutter"],
},
},
};