@biom3/design-tokens
Advanced tools
Comparing version 0.2.10 to 0.2.11
@@ -63,3 +63,5 @@ type BaseTokensLeaf = string | number | number[] | undefined | { | ||
200: string; | ||
150: string; | ||
100: string; | ||
50: string; | ||
}; | ||
@@ -100,2 +102,11 @@ }; | ||
}; | ||
highlight: string; | ||
destructive: { | ||
primary: string; | ||
secondary: string; | ||
inverse: { | ||
primary: string; | ||
secondary: string; | ||
}; | ||
}; | ||
}; | ||
@@ -102,0 +113,0 @@ fixed: { |
@@ -1,1 +0,1 @@ | ||
"use strict";var e,t=Object.create,r=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,n=Object.getPrototypeOf,i=Object.prototype.hasOwnProperty,p=(e,t,n,p)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let s of o(t))i.call(e,s)||s===n||r(e,s,{get:()=>t[s],enumerable:!(p=a(t,s))||p.enumerable});return e},s={};((e,t)=>{for(var a in t)r(e,a,{get:t[a],enumerable:!0})})(s,{base:()=>u,designTokens:()=>S,fontFaceStylesImport:()=>F,leafIsObject:()=>h,onDarkBase:()=>m,onLightBase:()=>u,pickTokenValue:()=>A,smartPickTokenValue:()=>C}),module.exports=(e=s,p(r({},"__esModule",{value:!0}),e));var F='@import url("https://biome.immutable.com/hosted-assets/css/im-fonts-v4.css");',x={size:{600:"6px",500:"5px",400:"4px",300:"3px",200:"2px",100:"1px"}},l={size:{600:"64px",500:"48px",400:"32px",300:"24px",250:"20px",200:"16px",100:"12px"}},d={family:{heading:{primary:"'Suisse-Intl', sans-serif",secondary:"'Suisse-Intl', sans-serif"},body:{primary:"'Roboto', sans-serif",secondary:"'Roboto Mono', monospace"}},decoration:{underline:"underline",lineThrough:"line-through",none:"none"},casing:{uppercase:"uppercase",none:"none"}},g={body:{large:{regular:{fontSize:"20px",lineHeight:"28px",fontWeight:400},bold:{fontWeight:500}},medium:{regular:{fontSize:"16px",lineHeight:"24px",fontWeight:400},bold:{fontWeight:500}},small:{regular:{fontSize:"14px",lineHeight:"20px",fontWeight:400},bold:{fontWeight:700}},xSmall:{regular:{fontSize:"12px",lineHeight:"16px",fontWeight:400},bold:{fontWeight:700}},xxSmall:{regular:{fontSize:"10px",lineHeight:"14px",fontWeight:400},bold:{fontWeight:700}}},caption:{medium:{regular:{fontSize:"14px",lineHeight:"20px",fontWeight:400,casing:"uppercase",letterSpacing:"2px"},bold:{fontSize:"14px",lineHeight:"20px",fontWeight:700,casing:"uppercase",letterSpacing:"2px"}},small:{regular:{fontSize:"10px",lineHeight:"14px",fontWeight:400,casing:"uppercase",letterSpacing:"2px"},bold:{fontSize:"10px",lineHeight:"14px",fontWeight:700,casing:"uppercase",letterSpacing:"2px"}}},heading:{xxLarge:{regular:{fontSize:"96px",lineHeight:"112px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},xLarge:{regular:{fontSize:"64px",lineHeight:"72px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},large:{regular:{fontSize:"40px",lineHeight:"48px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},medium:{regular:{fontSize:"28px",lineHeight:"32px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},small:{regular:{fontSize:"20px",lineHeight:"28px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},xSmall:{regular:{fontSize:"16px",lineHeight:"24px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}}}},c={x1:"4px",x2:"8px",x3:"12px",x4:"16px",x5:"20px",x6:"24px",x7:"28px",x8:"32px",x9:"36px",x10:"40px",x11:"44px",x12:"48px",x13:"52px",x14:"56px",x15:"60px",x16:"64px",x17:"68px",x18:"72px",x19:"76px",x20:"80px",x21:"84px",x22:"88px",x23:"92px",x24:"96px",x25:"100px",x26:"104px",x27:"108px",x28:"112px",x29:"116px",x30:"120px",x31:"124px",x32:"128px",x33:"132px",x34:"136px",x35:"140px",x36:"144px",x37:"148px",x38:"152px",x39:"156px",x40:"160px",x41:"164px",x42:"168px",x43:"172px",x44:"176px",x45:"180px",x46:"184px",x47:"188px",x48:"192px",x49:"196px",x50:"200px"},f={x1:"2px",x2:"4px",x3:"6px",x4:"8px",x5:"10px",x6:"12px",x7:"14px",x8:"16px",x9:"18px",x10:"20px",x11:"22px",x12:"24px",x13:"26px",x14:"28px",x15:"30px",x16:"32px",x17:"34px",x18:"36px",x19:"38px",x20:"40px",x21:"42px",x22:"44px",x23:"46px",x24:"48px",x25:"50px"},D={small:450,medium:768,large:1024,xLarge:1280,xxLarge:1536,xxxLarge:1920},b={tooltip:12,toast:11,popover:10,modal:9,drawer:8},E={normal:{gentle:{cssDuration:"0.4s",jsDuration:.4,cssEase:"ease-in-out",jsEase:"easeInOut"},fast:{cssDuration:"0.25s",jsDuration:.25,cssEase:"ease-in-out",jsEase:"easeInOut"}},bounce:{gentle:{cssDuration:"0.6s",jsDuration:.6,cssEase:"cubic-bezier(0.47, 1.74, 0.41, 0.8)",jsEase:[.47,1.74,.41,.8]},fast:{cssDuration:"0.45s",jsDuration:.45,cssEase:"cubic-bezier(0.47, 1.74, 0.41, 0.8)",jsEase:[.47,1.74,.41,.8]}}},u={colorMode:"darkOnLight",color:{brand:{1:"#131313",2:"#FFFFFF",3:"#E0E0E0",4:"#868686",5:"#36E0F8",6:"#1F8290"},neutral:{1e3:"#ECECEC",900:"#F0F0F0",800:"#F5F5F5",700:"#FAFAFA",600:"#FDFDFD",500:"#FFFFFF"},accent:{1:"#B026BD",2:"#1FD3F5",3:"#67C6E0",4:"#5AA0D9",5:"#8395E5",6:"#D8EFF4",7:"#F5BDD0",8:"#EC98CA"},translucent:{emphasis:{500:"#FFFFFFF5",400:"#FFFFFFE0",300:"#FFFFFFCC",200:"#FFFFFFA3",100:"#FFFFFF7A"},standard:{1e3:"#0D0D0DFF",900:"#0D0D0DE0",800:"#0D0D0DCC",700:"#0D0D0DA3",600:"#0D0D0D7A",500:"#0D0D0D3D",400:"#0D0D0D29",300:"#0D0D0D1F",200:"#0D0D0D1A",150:"#0D0D0D14",100:"#0D0D0D0A",50:"#0D0D0D05"},inverse:{1e3:"#FFFFFFFF",900:"#FFFFFFE6",800:"#FFFFFFCC",700:"#FFFFFFA3",600:"#FFFFFF7A",500:"#FFFFFF3D",400:"#FFFFFF29",300:"#FFFFFF1F",200:"#FFFFFF14",100:"#FFFFFF0A"}},status:{guidance:{bright:"#36E0F8",dim:"#9AEFFB"},success:{bright:"#ABF790",dim:"#D5FAC7"},attention:{bright:"#FBFF6D",dim:"#FCFEBF"},fatal:{bright:"#FF637F",dim:"#FFB1BF"},destructive:{bright:"#E01A3D",dim:"#FF637F"}},text:{primary:"base.color.brand.1",secondary:"#5C5C5C",link:{primary:"base.color.accent.1",secondary:"base.color.brand.1"},inverse:{primary:"base.color.brand.2",secondary:"base.color.brand.3"}},fixed:{black:{1e3:"base.color.translucent.standard.1000",100:"#0D0D0D14"},white:{1e3:"base.color.brand.2",100:"#FFFFFF14"}}},gradient:{1:{spectrum:"linear-gradient(90.68deg, #F191FA 0%, #83E3F0 99.82%)",blendMode:"normal",svgDefs:'<linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"\n gradientUnits="userSpaceOnUse">\n <stop stop-color="#F191FA" />\n <stop offset="1" stop-color="#83E3F0" />\n </linearGradient>',svgDefIds:"gradient-1-singleLayer"},2:{spectrum:"radial-gradient(96.87% 65.57% at 54.34% 93.79%, #FCF5EE 0%, rgba(236, 190, 225, 0) 71.51%), radial-gradient(73.48% 242.97% at 26.54% 26.42%, #A3EEF8 0%, #A4DCF5 17.71%, #A6AEEC 38.02%, #ECBEE1 100%)",blendMode:"normal, normal",svgDefs:'<radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">\n <stop stop-color="#A3EEF8" />\n <stop offset="0.177083" stop-color="#A4DCF5" />\n <stop offset="0.380208" stop-color="#A6AEEC" />\n <stop offset="1" stop-color="#ECBEE1" />\n </radialGradient>\n <radialGradient id="gradient-2-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(9.7806 16.8827) rotate(84.265) scale(9.68552 18.5286)">\n <stop stop-color="#FCF5EE" />\n <stop offset="0.715135" stop-color="#ECBEE1" stop-opacity="0" />\n </radialGradient>',svgDefIds:"gradient-2-bottomLayer, gradient-2-topLayer"},3:{spectrum:"radial-gradient(100% 100% at 24.5% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(81.66deg, rgba(124, 246, 251, 0.48) 9.38%, rgba(254, 253, 248, 0.7) 98.47%), radial-gradient(4009.6% 10453.55% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)",blendMode:"normal, normal, normal",svgDefs:'<radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="rotate(60.6728) scale(36.75 1550.85)">\n <stop stop-color="#7EF8FE" />\n <stop offset="0.302083" stop-color="#7ABFEC" />\n <stop offset="0.455396" stop-color="#AEC3ED" />\n <stop offset="0.614583" stop-color="#DEF3F6" />\n <stop offset="1" stop-color="#FAF9F3" />\n </radialGradient>\n <linearGradient id="gradient-3-middleLayer" x1="-1.26123e-07" y1="4.8" x2="24" y2="2.16"\n gradientUnits="userSpaceOnUse">\n <stop stop-color="#7CF6FB" stop-opacity="0.48" />\n <stop offset="1" stop-color="#FEFDF8" stop-opacity="0.7" />\n </linearGradient>\n <radialGradient id="gradient-3-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(4.41 18) rotate(-52.9472) scale(22.5541)">\n <stop stop-color="#6AA0F2" />\n <stop offset="1" stop-color="#C6E5F7" stop-opacity="0" />\n </radialGradient>',svgDefIds:"gradient-3-bottomLayer,\n gradient-3-middleLayer,\n gradient-3-topLayer"}},shadow:{100:"0px 1px 2px rgba(0, 0, 0, 0.16), 0px 1px 4px 1px rgba(0, 0, 0, 0.32)",200:"0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px rgba(0, 0, 0, 0.32)",300:"0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.32)",400:"0px 8px 10px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",500:"0px 8px 12px 6px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.32)"},spacing:c,borderRadius:f,font:d,text:g,breakpoint:D,icon:l,border:x,zLevel:b,motion:E},m={colorMode:"lightOnDark",color:{brand:{1:"#F3F3F3",2:"#131313",3:"#E0E0E0",4:"#B6B6B6",5:"#36E0F8",6:"#1F8290"},neutral:{500:"#575757",600:"#444444",700:"#323232",800:"#1F1F1F",900:"#131313",1e3:"#0D0D0D"},accent:{1:"#F191FA",2:"#36E0F8",3:"#6FD6F2",4:"#61ADEB",5:"#99A8EA",6:"#E4F4F7",7:"#F8D1DE",8:"#F2B7DA"},translucent:{emphasis:{500:"#F3F3F333",400:"#F3F3F329",300:"#F3F3F31F",200:"#F3F3F314",100:"#F3F3F30A"},standard:{1e3:"#F3F3F3FF",900:"#F3F3F3E0",800:"#F3F3F3CC",700:"#F3F3F3A3",600:"#F3F3F37A",500:"#F3F3F33D",400:"#F3F3F329",300:"#F3F3F31F",200:"#F3F3F314",150:"#F3F3F30F",100:"#F3F3F30A",50:"#F3F3F305"},inverse:{1e3:"#0D0D0DFF",900:"#0D0D0DE6",800:"#0D0D0DCC",700:"#0D0D0DA3",600:"#0D0D0D7A",500:"#0D0D0D3D",400:"#0D0D0D29",300:"#0D0D0D1F",200:"#0D0D0D14",100:"#0D0D0D0A"}},status:{guidance:{bright:"#36E0F8",dim:"#94E9F5 "},success:{bright:"#ABF790",dim:"#D5FAC7"},attention:{bright:"#FAFD7E",dim:"#F6F8B9"},fatal:{bright:"#FF637F",dim:"#F9ABB9"},destructive:{bright:"#E01A3D",dim:"#FF637F"}},text:{primary:"base.color.brand.1",secondary:"base.color.brand.4",link:{primary:"base.color.accent.1",secondary:"base.color.brand.1"},inverse:{primary:"base.color.brand.2",secondary:"#464646"}},fixed:{black:{1e3:"base.color.brand.2",100:"#13131314"},white:{1e3:"base.color.brand.1",100:"#F3F3F314"}}},gradient:{1:{spectrum:"linear-gradient(105.76deg, #F191FA -46.96%, #83E3F0 99.99%)",blendMode:"normal",svgDefs:'\n <linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"\n gradientUnits="userSpaceOnUse">\n <stop stop-color="#C9A2F6" />\n <stop offset="1" stop-color="#83E3F0" />\n </linearGradient>',svgDefIds:"gradient-1-singleLayer"},2:{spectrum:"radial-gradient(96.87% 65.57% at 54.34% 93.79%, #FCF5EE 0%, rgba(236, 190, 225, 0) 71.51%), radial-gradient(73.48% 242.97% at 26.54% 26.42%, #A3EEF8 0%, #A4DCF5 17.71%, #A6AEEC 38.02%, #ECBEE1 100%)",blendMode:"normal, normal",svgDefs:'\n <radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">\n <stop stop-color="#A3EEF8" />\n <stop offset="0.177083" stop-color="#A4DCF5" />\n <stop offset="0.380208" stop-color="#A6AEEC" />\n <stop offset="1" stop-color="#ECBEE1" />\n </radialGradient>\n <radialGradient id="gradient-2-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(9.7806 16.8827) rotate(84.265) scale(9.68552 18.5286)">\n <stop stop-color="#FCF5EE" />\n <stop offset="0.715135" stop-color="#ECBEE1" stop-opacity="0" />\n </radialGradient>',svgDefIds:"gradient-2-bottomLayer, gradient-2-topLayer"},3:{spectrum:"radial-gradient(100% 100% at 24.5% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(81.66deg, rgba(124, 246, 251, 0.48) 9.38%, rgba(254, 253, 248, 0.7) 98.47%), radial-gradient(4009.6% 10453.55% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)",blendMode:"normal, normal, normal",svgDefs:'\n <radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="rotate(60.6728) scale(36.75 1550.85)">\n <stop stop-color="#7EF8FE" />\n <stop offset="0.302083" stop-color="#7ABFEC" />\n <stop offset="0.455396" stop-color="#AEC3ED" />\n <stop offset="0.614583" stop-color="#DEF3F6" />\n <stop offset="1" stop-color="#FAF9F3" />\n </radialGradient>\n <linearGradient id="gradient-3-middleLayer" x1="-1.26123e-07" y1="4.8" x2="24" y2="2.16"\n gradientUnits="userSpaceOnUse">\n <stop stop-color="#7CF6FB" stop-opacity="0.48" />\n <stop offset="1" stop-color="#FEFDF8" stop-opacity="0.7" />\n </linearGradient>\n <radialGradient id="gradient-3-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(4.41 18) rotate(-52.9472) scale(22.5541)">\n <stop stop-color="#6AA0F2" />\n <stop offset="1" stop-color="#C6E5F7" stop-opacity="0" />\n </radialGradient>',svgDefIds:"gradient-3-bottomLayer,\n gradient-3-middleLayer,\n gradient-3-topLayer"}},shadow:{100:"0px 1px 2px rgba(0, 0, 0, 0.16), 0px 1px 4px 1px rgba(0, 0, 0, 0.32)",200:"0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px rgba(0, 0, 0, 0.32)",300:"0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.32)",400:"0px 6px 10px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",500:"0px 8px 12px 6px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.32)"},spacing:c,borderRadius:f,font:d,text:g,breakpoint:D,icon:l,border:x,zLevel:b,motion:E};function h(e){return"string"!=typeof e&&"number"!=typeof e&&!Array.isArray(e)&&null!=e}var y=((e,a,o)=>(o=null!=e?t(n(e)):{},p(!a&&e&&e.__esModule?o:r(o,"default",{value:e,enumerable:!0}),e)))(require("lodash.get")),A=(e,t)=>(0,y.default)(e,t);function C(e,t){let r=A(e,t);return"string"==typeof r&&r.match(/^base./)&&(r=C(e,r)),r}var S={base:u};//# sourceMappingURL=index.js.map | ||
"use strict";var e,t=Object.create,r=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,n=Object.getPrototypeOf,i=Object.prototype.hasOwnProperty,p=(e,t,n,p)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let s of o(t))i.call(e,s)||s===n||r(e,s,{get:()=>t[s],enumerable:!(p=a(t,s))||p.enumerable});return e},s={};((e,t)=>{for(var a in t)r(e,a,{get:t[a],enumerable:!0})})(s,{base:()=>u,designTokens:()=>S,fontFaceStylesImport:()=>F,leafIsObject:()=>h,onDarkBase:()=>m,onLightBase:()=>u,pickTokenValue:()=>A,smartPickTokenValue:()=>C}),module.exports=(e=s,p(r({},"__esModule",{value:!0}),e));var F='@import url("https://biome.immutable.com/hosted-assets/css/im-fonts-v4.css");',x={size:{600:"6px",500:"5px",400:"4px",300:"3px",200:"2px",100:"1px"}},l={size:{600:"64px",500:"48px",400:"32px",300:"24px",250:"20px",200:"16px",100:"12px"}},d={family:{heading:{primary:"'Suisse-Intl', sans-serif",secondary:"'Suisse-Intl', sans-serif"},body:{primary:"'Roboto', sans-serif",secondary:"'Roboto Mono', monospace"}},decoration:{underline:"underline",lineThrough:"line-through",none:"none"},casing:{uppercase:"uppercase",none:"none"}},g={body:{large:{regular:{fontSize:"20px",lineHeight:"28px",fontWeight:400},bold:{fontWeight:500}},medium:{regular:{fontSize:"16px",lineHeight:"24px",fontWeight:400},bold:{fontWeight:500}},small:{regular:{fontSize:"14px",lineHeight:"20px",fontWeight:400},bold:{fontWeight:700}},xSmall:{regular:{fontSize:"12px",lineHeight:"16px",fontWeight:400},bold:{fontWeight:700}},xxSmall:{regular:{fontSize:"10px",lineHeight:"14px",fontWeight:400},bold:{fontWeight:700}}},caption:{medium:{regular:{fontSize:"14px",lineHeight:"20px",fontWeight:400,casing:"uppercase",letterSpacing:"2px"},bold:{fontSize:"14px",lineHeight:"20px",fontWeight:700,casing:"uppercase",letterSpacing:"2px"}},small:{regular:{fontSize:"10px",lineHeight:"14px",fontWeight:400,casing:"uppercase",letterSpacing:"2px"},bold:{fontSize:"10px",lineHeight:"14px",fontWeight:700,casing:"uppercase",letterSpacing:"2px"}}},heading:{xxLarge:{regular:{fontSize:"96px",lineHeight:"112px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},xLarge:{regular:{fontSize:"64px",lineHeight:"72px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},large:{regular:{fontSize:"40px",lineHeight:"48px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},medium:{regular:{fontSize:"28px",lineHeight:"32px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},small:{regular:{fontSize:"20px",lineHeight:"28px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}},xSmall:{regular:{fontSize:"16px",lineHeight:"24px",fontWeight:600},light:{fontWeight:400},bold:{fontWeight:700}}}},c={x1:"4px",x2:"8px",x3:"12px",x4:"16px",x5:"20px",x6:"24px",x7:"28px",x8:"32px",x9:"36px",x10:"40px",x11:"44px",x12:"48px",x13:"52px",x14:"56px",x15:"60px",x16:"64px",x17:"68px",x18:"72px",x19:"76px",x20:"80px",x21:"84px",x22:"88px",x23:"92px",x24:"96px",x25:"100px",x26:"104px",x27:"108px",x28:"112px",x29:"116px",x30:"120px",x31:"124px",x32:"128px",x33:"132px",x34:"136px",x35:"140px",x36:"144px",x37:"148px",x38:"152px",x39:"156px",x40:"160px",x41:"164px",x42:"168px",x43:"172px",x44:"176px",x45:"180px",x46:"184px",x47:"188px",x48:"192px",x49:"196px",x50:"200px"},D={x1:"2px",x2:"4px",x3:"6px",x4:"8px",x5:"10px",x6:"12px",x7:"14px",x8:"16px",x9:"18px",x10:"20px",x11:"22px",x12:"24px",x13:"26px",x14:"28px",x15:"30px",x16:"32px",x17:"34px",x18:"36px",x19:"38px",x20:"40px",x21:"42px",x22:"44px",x23:"46px",x24:"48px",x25:"50px"},f={small:450,medium:768,large:1024,xLarge:1280,xxLarge:1536,xxxLarge:1920},b={tooltip:12,toast:11,popover:10,modal:9,drawer:8},E={normal:{gentle:{cssDuration:"0.4s",jsDuration:.4,cssEase:"ease-in-out",jsEase:"easeInOut"},fast:{cssDuration:"0.25s",jsDuration:.25,cssEase:"ease-in-out",jsEase:"easeInOut"}},bounce:{gentle:{cssDuration:"0.6s",jsDuration:.6,cssEase:"cubic-bezier(0.47, 1.74, 0.41, 0.8)",jsEase:[.47,1.74,.41,.8]},fast:{cssDuration:"0.45s",jsDuration:.45,cssEase:"cubic-bezier(0.47, 1.74, 0.41, 0.8)",jsEase:[.47,1.74,.41,.8]}}},u={colorMode:"darkOnLight",color:{brand:{1:"#131313",2:"#FFFFFF",3:"#E0E0E0",4:"#868686",5:"#36E0F8",6:"#1F8290"},neutral:{1e3:"#E7E7E7",900:"#ECECEC",800:"#F1F1F1",700:"#F6F6F6",600:"#FAFAFA",500:"#FFFFFF"},accent:{1:"#B026BD",2:"#1FD3F5",3:"#67C6E0",4:"#5AA0D9",5:"#8395E5",6:"#D8EFF4",7:"#F5BDD0",8:"#EC98CA"},translucent:{emphasis:{500:"#0D0D0D1F",400:"#0D0D0D1A",300:"#0D0D0D14",200:"#0D0D0D0F",100:"#0D0D0D0A"},standard:{1e3:"#0D0D0DFF",900:"#0D0D0DE0",800:"#0D0D0DCC",700:"#0D0D0DA3",600:"#0D0D0D7A",500:"#0D0D0D3D",400:"#0D0D0D29",300:"#0D0D0D1F",200:"#0D0D0D1A",150:"#0D0D0D14",100:"#0D0D0D0A",50:"#0D0D0D05"},inverse:{1e3:"#FFFFFFFF",900:"#FFFFFFE6",800:"#FFFFFFCC",700:"#FFFFFFA3",600:"#FFFFFF7A",500:"#FFFFFF3D",400:"#FFFFFF29",300:"#FFFFFF1F",200:"#FFFFFF14",150:"#FFFFFF0F",100:"#FFFFFF0A",50:"#FFFFFF05"}},status:{guidance:{bright:"#36E0F8",dim:"#9AEFFB"},success:{bright:"#ABF790",dim:"#D5FAC7"},attention:{bright:"#FBFF6D",dim:"#FCFEBF"},fatal:{bright:"#FF637F",dim:"#FFB1BF"},destructive:{bright:"#E01A3D",dim:"#FF637F"}},text:{primary:"base.color.brand.1",secondary:"#5C5C5C",highlight:"#36E0F833",link:{primary:"base.color.accent.1",secondary:"base.color.brand.1"},inverse:{primary:"base.color.brand.2",secondary:"base.color.brand.3"},destructive:{primary:"#E01A3D",secondary:"#FF637F",inverse:{primary:"#FFFFFF",secondary:"#FFFFFF"}}},fixed:{black:{1e3:"#0D0D0D",100:"#0D0D0D14"},white:{1e3:"#FFFFFF",100:"#FFFFFF14"}}},gradient:{1:{spectrum:"linear-gradient(90.68deg, #F191FA 0%, #83E3F0 99.82%)",blendMode:"normal",svgDefs:'<linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"\n gradientUnits="userSpaceOnUse">\n <stop stop-color="#F191FA" />\n <stop offset="1" stop-color="#83E3F0" />\n </linearGradient>',svgDefIds:"gradient-1-singleLayer"},2:{spectrum:"radial-gradient(96.87% 65.57% at 54.34% 93.79%, #FCF5EE 0%, rgba(236, 190, 225, 0) 71.51%), radial-gradient(73.48% 242.97% at 26.54% 26.42%, #A3EEF8 0%, #A4DCF5 17.71%, #A6AEEC 38.02%, #ECBEE1 100%)",blendMode:"normal, normal",svgDefs:'<radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">\n <stop stop-color="#A3EEF8" />\n <stop offset="0.177083" stop-color="#A4DCF5" />\n <stop offset="0.380208" stop-color="#A6AEEC" />\n <stop offset="1" stop-color="#ECBEE1" />\n </radialGradient>\n <radialGradient id="gradient-2-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(9.7806 16.8827) rotate(84.265) scale(9.68552 18.5286)">\n <stop stop-color="#FCF5EE" />\n <stop offset="0.715135" stop-color="#ECBEE1" stop-opacity="0" />\n </radialGradient>',svgDefIds:"gradient-2-bottomLayer, gradient-2-topLayer"},3:{spectrum:"radial-gradient(100% 100% at 24.5% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(81.66deg, rgba(124, 246, 251, 0.48) 9.38%, rgba(254, 253, 248, 0.7) 98.47%), radial-gradient(4009.6% 10453.55% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)",blendMode:"normal, normal, normal",svgDefs:'<radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="rotate(60.6728) scale(36.75 1550.85)">\n <stop stop-color="#7EF8FE" />\n <stop offset="0.302083" stop-color="#7ABFEC" />\n <stop offset="0.455396" stop-color="#AEC3ED" />\n <stop offset="0.614583" stop-color="#DEF3F6" />\n <stop offset="1" stop-color="#FAF9F3" />\n </radialGradient>\n <linearGradient id="gradient-3-middleLayer" x1="-1.26123e-07" y1="4.8" x2="24" y2="2.16"\n gradientUnits="userSpaceOnUse">\n <stop stop-color="#7CF6FB" stop-opacity="0.48" />\n <stop offset="1" stop-color="#FEFDF8" stop-opacity="0.7" />\n </linearGradient>\n <radialGradient id="gradient-3-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(4.41 18) rotate(-52.9472) scale(22.5541)">\n <stop stop-color="#6AA0F2" />\n <stop offset="1" stop-color="#C6E5F7" stop-opacity="0" />\n </radialGradient>',svgDefIds:"gradient-3-bottomLayer,\n gradient-3-middleLayer,\n gradient-3-topLayer"}},shadow:{100:"0px 1px 2px rgba(0, 0, 0, 0.16), 0px 1px 4px 1px rgba(0, 0, 0, 0.32)",200:"0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px rgba(0, 0, 0, 0.32)",300:"0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.32)",400:"0px 8px 10px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",500:"0px 8px 12px 6px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.32)"},spacing:c,borderRadius:D,font:d,text:g,breakpoint:f,icon:l,border:x,zLevel:b,motion:E},m={colorMode:"lightOnDark",color:{brand:{1:"#F3F3F3",2:"#131313",3:"#E0E0E0",4:"#B6B6B6",5:"#36E0F8",6:"#1F8290"},neutral:{1e3:"#0D0D0D",900:"#131313",800:"#1C1C1C",700:"#202020",600:"#252525",500:"#292929"},accent:{1:"#F191FA",2:"#36E0F8",3:"#6FD6F2",4:"#61ADEB",5:"#99A8EA",6:"#E4F4F7",7:"#F8D1DE",8:"#F2B7DA"},translucent:{emphasis:{500:"#F3F3F329",400:"#F3F3F31F",300:"#F3F3F31A",200:"#F3F3F314",100:"#F3F3F30F"},standard:{1e3:"#F3F3F3",900:"#F3F3F3E0",800:"#F3F3F3CC",700:"#F3F3F3A3",600:"#F3F3F37A",500:"#F3F3F33D",400:"#F3F3F329",300:"#F3F3F31F",200:"#F3F3F314",150:"#F3F3F30F",100:"#F3F3F30A",50:"#F3F3F305"},inverse:{1e3:"#0D0D0D",900:"#0D0D0DE0",800:"#0D0D0DCC",700:"#0D0D0DA3",600:"#0D0D0D7A",500:"#0D0D0D3D",400:"#0D0D0D29",300:"#0D0D0D1F",200:"#0D0D0D14",150:"#0D0D0D0F",100:"#0D0D0D0A",50:"#0D0D0D05"}},status:{guidance:{bright:"#36E0F8",dim:"#94E9F5 "},success:{bright:"#ABF790",dim:"#D5FAC7"},attention:{bright:"#FAFD7E",dim:"#F6F8B9"},fatal:{bright:"#FF637F",dim:"#F9ABB9"},destructive:{bright:"#E01A3D",dim:"#FF637F"}},text:{primary:"base.color.brand.1",secondary:"base.color.brand.4",link:{primary:"base.color.accent.1",secondary:"base.color.brand.1"},inverse:{primary:"base.color.brand.2",secondary:"#464646"},highlight:"#36E0F866",destructive:{primary:"#FF2D55",secondary:"#FF2D55",inverse:{primary:"#F3F3F3",secondary:"#F3F3F3"}}},fixed:{black:{1e3:"#131313",100:"#13131314"},white:{1e3:"#F3F3F3",100:"#F3F3F314"}}},gradient:{1:{spectrum:"linear-gradient(105.76deg, #F191FA -46.96%, #83E3F0 99.99%)",blendMode:"normal",svgDefs:'\n <linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"\n gradientUnits="userSpaceOnUse">\n <stop stop-color="#C9A2F6" />\n <stop offset="1" stop-color="#83E3F0" />\n </linearGradient>',svgDefIds:"gradient-1-singleLayer"},2:{spectrum:"radial-gradient(96.87% 65.57% at 54.34% 93.79%, #FCF5EE 0%, rgba(236, 190, 225, 0) 71.51%), radial-gradient(73.48% 242.97% at 26.54% 26.42%, #A3EEF8 0%, #A4DCF5 17.71%, #A6AEEC 38.02%, #ECBEE1 100%)",blendMode:"normal, normal",svgDefs:'\n <radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">\n <stop stop-color="#A3EEF8" />\n <stop offset="0.177083" stop-color="#A4DCF5" />\n <stop offset="0.380208" stop-color="#A6AEEC" />\n <stop offset="1" stop-color="#ECBEE1" />\n </radialGradient>\n <radialGradient id="gradient-2-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(9.7806 16.8827) rotate(84.265) scale(9.68552 18.5286)">\n <stop stop-color="#FCF5EE" />\n <stop offset="0.715135" stop-color="#ECBEE1" stop-opacity="0" />\n </radialGradient>',svgDefIds:"gradient-2-bottomLayer, gradient-2-topLayer"},3:{spectrum:"radial-gradient(100% 100% at 24.5% 100%, rgba(106, 160, 242, 0.9) 0%, rgba(198, 229, 247, 0) 100%), linear-gradient(81.66deg, rgba(124, 246, 251, 0.48) 9.38%, rgba(254, 253, 248, 0.7) 98.47%), radial-gradient(4009.6% 10453.55% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)",blendMode:"normal, normal, normal",svgDefs:'\n <radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="rotate(60.6728) scale(36.75 1550.85)">\n <stop stop-color="#7EF8FE" />\n <stop offset="0.302083" stop-color="#7ABFEC" />\n <stop offset="0.455396" stop-color="#AEC3ED" />\n <stop offset="0.614583" stop-color="#DEF3F6" />\n <stop offset="1" stop-color="#FAF9F3" />\n </radialGradient>\n <linearGradient id="gradient-3-middleLayer" x1="-1.26123e-07" y1="4.8" x2="24" y2="2.16"\n gradientUnits="userSpaceOnUse">\n <stop stop-color="#7CF6FB" stop-opacity="0.48" />\n <stop offset="1" stop-color="#FEFDF8" stop-opacity="0.7" />\n </linearGradient>\n <radialGradient id="gradient-3-topLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"\n gradientTransform="translate(4.41 18) rotate(-52.9472) scale(22.5541)">\n <stop stop-color="#6AA0F2" />\n <stop offset="1" stop-color="#C6E5F7" stop-opacity="0" />\n </radialGradient>',svgDefIds:"gradient-3-bottomLayer,\n gradient-3-middleLayer,\n gradient-3-topLayer"}},shadow:{100:"0px 1px 2px rgba(0, 0, 0, 0.16), 0px 1px 4px 1px rgba(0, 0, 0, 0.32)",200:"0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px rgba(0, 0, 0, 0.32)",300:"0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.32)",400:"0px 6px 10px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",500:"0px 8px 12px 6px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.32)"},spacing:c,borderRadius:D,font:d,text:g,breakpoint:f,icon:l,border:x,zLevel:b,motion:E};function h(e){return"string"!=typeof e&&"number"!=typeof e&&!Array.isArray(e)&&null!=e}var y=((e,a,o)=>(o=null!=e?t(n(e)):{},p(!a&&e&&e.__esModule?o:r(o,"default",{value:e,enumerable:!0}),e)))(require("lodash.get")),A=(e,t)=>(0,y.default)(e,t);function C(e,t){let r=A(e,t);return"string"==typeof r&&r.match(/^base./)&&(r=C(e,r)),r}var S={base:u};//# sourceMappingURL=index.js.map |
{ | ||
"name": "@biom3/design-tokens", | ||
"version": "0.2.10", | ||
"version": "0.2.11", | ||
"main": "./dist/index.js", | ||
@@ -5,0 +5,0 @@ "module": "./dist/index.mjs", |
@@ -13,8 +13,8 @@ import { Colors, Gradients, Shadows } from '../../types'; | ||
neutral: { | ||
500: '#575757', | ||
600: '#444444', | ||
700: '#323232', | ||
800: '#1F1F1F', | ||
1000: '#0D0D0D', | ||
900: '#131313', | ||
1000: '#0D0D0D', | ||
800: '#1C1C1C', | ||
700: '#202020', | ||
600: '#252525', | ||
500: '#292929', | ||
}, | ||
@@ -33,10 +33,10 @@ accent: { | ||
emphasis: { | ||
500: '#F3F3F333', // rgba(243, 243, 243, 0.96) | ||
400: '#F3F3F329', // rgba(243, 243, 243, 0.88) | ||
300: '#F3F3F31F', // rgba(243, 243, 243, 0.80) | ||
200: '#F3F3F314', // rgba(243, 243, 243, 0.64) | ||
100: '#F3F3F30A', // rgba(243, 243, 243, 0.48) | ||
500: '#F3F3F329', // rgba(243, 243, 243, 0.16) | ||
400: '#F3F3F31F', // rgba(243, 243, 243, 0.12) | ||
300: '#F3F3F31A', // rgba(243, 243, 243, 0.10) | ||
200: '#F3F3F314', // rgba(243, 243, 243, 0.08) | ||
100: '#F3F3F30F', // rgba(243, 243, 243, 0.06) | ||
}, | ||
standard: { | ||
1000: '#F3F3F3FF', // rgba(243, 243, 243, 1) | ||
1000: '#F3F3F3', // rgba(243, 243, 243, 1) | ||
900: '#F3F3F3E0', // rgba(243, 243, 243, 0.88) | ||
@@ -55,4 +55,4 @@ 800: '#F3F3F3CC', // rgba(243, 243, 243, 0.80) | ||
inverse: { | ||
1000: '#0D0D0DFF', | ||
900: '#0D0D0DE6', | ||
1000: '#0D0D0D', | ||
900: '#0D0D0DE0', | ||
800: '#0D0D0DCC', | ||
@@ -65,3 +65,5 @@ 700: '#0D0D0DA3', | ||
200: '#0D0D0D14', | ||
150: '#0D0D0D0F', | ||
100: '#0D0D0D0A', | ||
50: '#0D0D0D05', | ||
}, | ||
@@ -102,10 +104,19 @@ }, | ||
}, | ||
highlight: '#36E0F866', | ||
destructive: { | ||
primary: '#FF2D55', | ||
secondary: '#FF2D55', | ||
inverse: { | ||
primary: '#F3F3F3', | ||
secondary: '#F3F3F3', | ||
}, | ||
}, | ||
}, | ||
fixed: { | ||
black: { | ||
1000: 'base.color.brand.2', | ||
1000: '#131313', | ||
100: '#13131314', | ||
}, | ||
white: { | ||
1000: 'base.color.brand.1', | ||
1000: '#F3F3F3', | ||
100: '#F3F3F314', | ||
@@ -112,0 +123,0 @@ }, |
@@ -13,7 +13,7 @@ import { Colors, Gradients, Shadows } from '../../types'; | ||
neutral: { | ||
1000: '#ECECEC', | ||
900: '#F0F0F0', | ||
800: '#F5F5F5', | ||
700: '#FAFAFA', | ||
600: '#FDFDFD', | ||
1000: '#E7E7E7', | ||
900: '#ECECEC', | ||
800: '#F1F1F1', | ||
700: '#F6F6F6', | ||
600: '#FAFAFA', | ||
500: '#FFFFFF', | ||
@@ -33,7 +33,7 @@ }, | ||
emphasis: { | ||
500: '#FFFFFFF5', // rgba(255, 255, 255, 0.96) | ||
400: '#FFFFFFE0', // rgba(255, 255, 255, 0.88) | ||
300: '#FFFFFFCC', // rgba(255, 255, 255, 0.80) | ||
200: '#FFFFFFA3', // rgba(255, 255, 255, 0.64) | ||
100: '#FFFFFF7A', // rgba(255, 255, 255, 0.48) | ||
500: '#0D0D0D1F', // rgba(255, 255, 255, 0.12) | ||
400: '#0D0D0D1A', // rgba(255, 255, 255, 0.10) | ||
300: '#0D0D0D14', // rgba(255, 255, 255, 0.08) | ||
200: '#0D0D0D0F', // rgba(255, 255, 255, 0.06) | ||
100: '#0D0D0D0A', // rgba(255, 255, 255, 0.04) | ||
}, | ||
@@ -43,3 +43,3 @@ standard: { | ||
900: '#0D0D0DE0', // rgba(13, 13, 13, 0.88) | ||
800: '#0D0D0DCC', // rgba(13, 13, 13, 0.75) | ||
800: '#0D0D0DCC', // rgba(13, 13, 13, 0.80) | ||
700: '#0D0D0DA3', // rgba(13, 13, 13, 0.64) | ||
@@ -65,3 +65,5 @@ 600: '#0D0D0D7A', // rgba(13, 13, 13, 0.48) | ||
200: '#FFFFFF14', | ||
150: '#FFFFFF0F', | ||
100: '#FFFFFF0A', | ||
50: '#FFFFFF05', | ||
}, | ||
@@ -94,2 +96,3 @@ }, | ||
secondary: '#5C5C5C', | ||
highlight: '#36E0F833', | ||
link: { | ||
@@ -103,10 +106,18 @@ primary: 'base.color.accent.1', | ||
}, | ||
destructive: { | ||
primary: '#E01A3D', | ||
secondary: '#FF637F', | ||
inverse: { | ||
primary: '#FFFFFF', | ||
secondary: '#FFFFFF', | ||
}, | ||
}, | ||
}, | ||
fixed: { | ||
black: { | ||
1000: 'base.color.translucent.standard.1000', | ||
1000: '#0D0D0D', | ||
100: '#0D0D0D14', | ||
}, | ||
white: { | ||
1000: 'base.color.brand.2', | ||
1000: '#FFFFFF', | ||
100: '#FFFFFF14', | ||
@@ -113,0 +124,0 @@ }, |
@@ -70,3 +70,5 @@ export type BaseTokensLeaf = | ||
200: string; | ||
150: string; | ||
100: string; | ||
50: string; | ||
}; | ||
@@ -107,2 +109,11 @@ }; | ||
}; | ||
highlight: string; | ||
destructive: { | ||
primary: string; | ||
secondary: string; | ||
inverse: { | ||
primary: string; | ||
secondary: string; | ||
}; | ||
}; | ||
}; | ||
@@ -109,0 +120,0 @@ fixed: { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
186280
2562