@onbeam/styled-system - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/config/index.js

@@ -110,2 +110,11 @@ 'use strict';
     }
+  },
+  // TODO: Ben should check this out
+  code: {
+    value: {
+      fontSize: "1rem",
+      fontFamily: "{fonts.code}",
+      fontWeight: 400,
+      lineHeight: "16px"
+    }
   }
@@ -131,2 +140,4 @@ };
   text: { value: "0px 1px 0px rgba(255, 255, 255, 0.10)" },
+  neon: { value: "0px 0px 10px rgba(216, 162, 239, 0.50)" },
+  inner: { value: "inset 0px -2px 2px 0px rgba(255, 255, 255, 0.07)" },
   border: {
@@ -144,2 +155,5 @@ DEFAULT: { value: "inset 0 0 0 1px {colors.mono.900}" },
     value: "'Suisse Intl', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif"
+  },
+  code: {
+    value: "'Fira Code', monospace"
   }
@@ -158,3 +172,11 @@ };
     900: { value: "#131313" },
-    1e3: { value: "#000000" }
+    1e3: { value: "#000000" },
+    // TODO: Rename these whenever Design updates the colors
+    111: { value: "#242424" },
+    222: { value: "#222222" },
+    333: { value: "#151515" },
+    444: { value: "#393939" },
+    555: { value: "#272727" },
+    666: { value: "#d7d7d7" },
+    777: { value: "#04040b" }
   },
@@ -166,3 +188,3 @@ green: {
   red: {
-    // Add /05 to the end of the color name to make it 5% opacity, conforming to the figma design
+    // Add /5 to the end of the color name to make it 5% opacity, conforming to the figma design
     400: { value: "#ff5544" },
@@ -222,2 +244,3 @@ 500: { value: "#ff4539" }
 var radii = {
+  none: { value: "0" },
   xs: { value: ".25rem" },
@@ -263,2 +286,10 @@ sm: { value: ".5rem" },
     }
+  },
+  barStripe: {
+    from: {
+      transform: "translate(0%)"
+    },
+    to: {
+      transform: "translate(-50%)"
+    }
   }
@@ -280,3 +311,3 @@ };
 var durations = {
-  xSlow: { value: "500ms" },
+  xSlow: { value: "1000ms" },
   slow: { value: "400ms" },
@@ -283,0 +314,0 @@ normal: { value: "300ms" },

dist/config/index.mjs

@@ -108,2 +108,11 @@ var __defProp = Object.defineProperty;
     }
+  },
+  // TODO: Ben should check this out
+  code: {
+    value: {
+      fontSize: "1rem",
+      fontFamily: "{fonts.code}",
+      fontWeight: 400,
+      lineHeight: "16px"
+    }
   }
@@ -129,2 +138,4 @@ };
   text: { value: "0px 1px 0px rgba(255, 255, 255, 0.10)" },
+  neon: { value: "0px 0px 10px rgba(216, 162, 239, 0.50)" },
+  inner: { value: "inset 0px -2px 2px 0px rgba(255, 255, 255, 0.07)" },
   border: {
@@ -142,2 +153,5 @@ DEFAULT: { value: "inset 0 0 0 1px {colors.mono.900}" },
     value: "'Suisse Intl', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif"
+  },
+  code: {
+    value: "'Fira Code', monospace"
   }
@@ -156,3 +170,11 @@ };
     900: { value: "#131313" },
-    1e3: { value: "#000000" }
+    1e3: { value: "#000000" },
+    // TODO: Rename these whenever Design updates the colors
+    111: { value: "#242424" },
+    222: { value: "#222222" },
+    333: { value: "#151515" },
+    444: { value: "#393939" },
+    555: { value: "#272727" },
+    666: { value: "#d7d7d7" },
+    777: { value: "#04040b" }
   },
@@ -164,3 +186,3 @@ green: {
   red: {
-    // Add /05 to the end of the color name to make it 5% opacity, conforming to the figma design
+    // Add /5 to the end of the color name to make it 5% opacity, conforming to the figma design
     400: { value: "#ff5544" },
@@ -220,2 +242,3 @@ 500: { value: "#ff4539" }
 var radii = {
+  none: { value: "0" },
   xs: { value: ".25rem" },
@@ -261,2 +284,10 @@ sm: { value: ".5rem" },
     }
+  },
+  barStripe: {
+    from: {
+      transform: "translate(0%)"
+    },
+    to: {
+      transform: "translate(-50%)"
+    }
   }
@@ -278,3 +309,3 @@ };
 var durations = {
-  xSlow: { value: "500ms" },
+  xSlow: { value: "1000ms" },
   slow: { value: "400ms" },
@@ -281,0 +312,0 @@ normal: { value: "300ms" },

dist/styles.css

@@ -1,1 +0,1 @@
-@layer beam-reset, beam-base, beam-tokens, beam-recipes, beam-utitlies;@layer beam-reset{:host,html{--font-fallback:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5;font-family:var(--global-font-body,var(--font-fallback))}*,::backdrop,::file-selector-button,:after,:before,:first-letter{margin:0px;padding:0px;box-sizing:border-box;border-width:0px;border-style:solid;border-color:var(--global-color-border,currentColor)}hr{height:0px;color:inherit;border-top-width:1px}body{height:100%;line-height:inherit}img{border-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-size:inherit;font-weight:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}menu,ol,ul{list-style:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){appearance:button;-webkit-appearance:button}::file-selector-button,button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}::placeholder{opacity:1;--placeholder-fallback:color-mix(in srgb,currentColor 50%,transparent);color:var(--global-color-placeholder,var(--placeholder-fallback))}input:where(:not([type=button],[type=reset],[type=submit])),select,textarea{border-width:1px;border-style:solid}textarea{resize:vertical}table{text-indent:0px;border-collapse:collapse;border-color:inherit}summary{display:list-item}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}dialog{padding:0px}a{color:inherit;text-decoration:inherit}abbr:where([title]){text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{--font-mono-fallback:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';font-feature-settings:normal;font-variation-settings:normal;font-family:var(--global-font-mono,var(--font-mono-fallback));font-size:1em}progress{vertical-align:baseline}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}:-moz-ui-invalid{box-shadow:none}:-moz-focusring{outline:auto}[hidden]{display:none!important}}@layer beam-base{:root{--made-with-panda:'🐼'}*,::backdrop,:after,:before{--blur: ;--brightness: ;--contrast: ;--grayscale: ;--hue-rotate: ;--invert: ;--saturate: ;--sepia: ;--drop-shadow: ;--backdrop-blur: ;--backdrop-brightness: ;--backdrop-contrast: ;--backdrop-grayscale: ;--backdrop-hue-rotate: ;--backdrop-invert: ;--backdrop-opacity: ;--backdrop-saturate: ;--backdrop-sepia: ;--gradient-from-position: ;--gradient-to-position: ;--gradient-via-position: ;--scroll-snap-strictness:proximity;--border-spacing-x:0;--border-spacing-y:0;--translate-x:0;--translate-y:0;--rotate:0;--rotate-x:0;--rotate-y:0;--skew-x:0;--skew-y:0;--scale-x:1;--scale-y:1}}@layer beam-tokens{:where(:root,:host){--beam-fonts-main:'Suisse Intl',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;--beam-shadows-lg:0px 4px 20px rgba(0,0,0,0.45);--beam-shadows-md:0px 4px 4px rgba(0,0,0,0.25),inset 0px -2px 2px rgba(255,255,255,0.07);--beam-shadows-sm:inset 0px -2px 2px rgba(255,255,255,0.07),0px 2px 2px rgba(0,0,0,0.25);--beam-shadows-text:0px 1px 0px rgba(255,255,255,0.10);--beam-shadows-border:inset 0 0 0 1px var(--beam-colors-mono-900);--beam-shadows-border-active:inset 0 0 0 1px rgba(255,255,255,0.65);--beam-shadows-border-error:inset 0 0 0 1px var(--beam-colors-red-500);--beam-colors-mono-0:#FFFFFF;--beam-colors-mono-100:#F1F1F1;--beam-colors-mono-200:#DEE7E1;--beam-colors-mono-300:#6D6D6D;--beam-colors-mono-400:#313131;--beam-colors-mono-900:#131313;--beam-colors-mono-1000:#000000;--beam-colors-green-400:#60ff83;--beam-colors-green-500:#48dd13;--beam-colors-red-400:#ff5544;--beam-colors-red-500:#ff4539;--beam-colors-orange-200:#fea514;--beam-colors-orange-600:#ff5c00;--beam-colors-purple-200:#ebbcff;--beam-spacing-0:0;--beam-spacing-1:.25rem;--beam-spacing-2:.5rem;--beam-spacing-3:.75rem;--beam-spacing-4:1rem;--beam-spacing-5:1.125rem;--beam-spacing-6:1.5rem;--beam-spacing-7:1.75rem;--beam-spacing-8:2rem;--beam-spacing-9:2.25rem;--beam-spacing-10:2.5rem;--beam-spacing-11:2.75rem;--beam-spacing-12:3rem;--beam-spacing-14:3.5rem;--beam-spacing-16:4rem;--beam-spacing-20:5rem;--beam-spacing-24:6rem;--beam-spacing-28:7rem;--beam-spacing-32:8rem;--beam-spacing-36:9rem;--beam-spacing-40:10rem;--beam-spacing-44:11rem;--beam-spacing-48:12rem;--beam-spacing-52:13rem;--beam-spacing-56:14rem;--beam-spacing-60:15rem;--beam-spacing-64:16rem;--beam-spacing-72:18rem;--beam-spacing-80:20rem;--beam-spacing-96:24rem;--beam-spacing-0\.5:.125rem;--beam-spacing-1\.5:.375rem;--beam-spacing-2\.5:.625rem;--beam-spacing-3\.5:.875rem;--beam-radii-xs:.25rem;--beam-radii-sm:.5rem;--beam-radii-md:.75rem;--beam-radii-lg:1rem;--beam-radii-xl:1.5rem;--beam-radii-2xl:2rem;--beam-radii-3xl:2.5rem;--beam-radii-full:999rem;--beam-durations-x-slow:500ms;--beam-durations-slow:400ms;--beam-durations-normal:300ms;--beam-durations-fast:200ms;--beam-durations-x-fast:100ms;--beam-durations-none:0ms;--beam-assets-noise:url("data:image/svg+xml,%3csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='a'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23a)'/%3e%3c/svg%3e");--beam-assets-grid:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cpattern id='a' width='2' height='2' patternUnits='userSpaceOnUse'%3e%3cpath d='M2 0H0v2' fill='none' stroke='%232b2b2a'/%3e%3c/pattern%3e%3c/defs%3e%3crect width='100%25' height='100%25' fill='url(%23a)'/%3e%3c/svg%3e");--beam-breakpoints-sm:40rem;--beam-breakpoints-md:48rem;--beam-breakpoints-lg:64rem;--beam-breakpoints-xl:80rem;--beam-breakpoints-2xl:96rem;--beam-sizes-breakpoint-sm:40rem;--beam-sizes-breakpoint-md:48rem;--beam-sizes-breakpoint-lg:64rem;--beam-sizes-breakpoint-xl:80rem;--beam-sizes-breakpoint-2xl:96rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}@keyframes scroll{0%{transform:translateX(0)}to{transform:translateX(-100%)}}}
+@layer beam-reset, beam-base, beam-tokens, beam-recipes, beam-utitlies;@layer beam-reset{:host,html{--font-fallback:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5;font-family:var(--global-font-body,var(--font-fallback))}*,::backdrop,::file-selector-button,:after,:before,:first-letter{margin:0px;padding:0px;box-sizing:border-box;border-width:0px;border-style:solid;border-color:var(--global-color-border,currentColor)}hr{height:0px;color:inherit;border-top-width:1px}body{height:100%;line-height:inherit}img{border-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-size:inherit;font-weight:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}menu,ol,ul{list-style:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){appearance:button;-webkit-appearance:button}::file-selector-button,button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}::placeholder{opacity:1;--placeholder-fallback:color-mix(in srgb,currentColor 50%,transparent);color:var(--global-color-placeholder,var(--placeholder-fallback))}input:where(:not([type=button],[type=reset],[type=submit])),select,textarea{border-width:1px;border-style:solid}textarea{resize:vertical}table{text-indent:0px;border-collapse:collapse;border-color:inherit}summary{display:list-item}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}dialog{padding:0px}a{color:inherit;text-decoration:inherit}abbr:where([title]){text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{--font-mono-fallback:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';font-feature-settings:normal;font-variation-settings:normal;font-family:var(--global-font-mono,var(--font-mono-fallback));font-size:1em}progress{vertical-align:baseline}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}:-moz-ui-invalid{box-shadow:none}:-moz-focusring{outline:auto}[hidden]{display:none!important}}@layer beam-base{:root{--made-with-panda:'🐼'}*,::backdrop,:after,:before{--blur: ;--brightness: ;--contrast: ;--grayscale: ;--hue-rotate: ;--invert: ;--saturate: ;--sepia: ;--drop-shadow: ;--backdrop-blur: ;--backdrop-brightness: ;--backdrop-contrast: ;--backdrop-grayscale: ;--backdrop-hue-rotate: ;--backdrop-invert: ;--backdrop-opacity: ;--backdrop-saturate: ;--backdrop-sepia: ;--gradient-from-position: ;--gradient-to-position: ;--gradient-via-position: ;--scroll-snap-strictness:proximity;--border-spacing-x:0;--border-spacing-y:0;--translate-x:0;--translate-y:0;--rotate:0;--rotate-x:0;--rotate-y:0;--skew-x:0;--skew-y:0;--scale-x:1;--scale-y:1}}@layer beam-tokens{:where(:root,:host){--beam-fonts-main:'Suisse Intl',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;--beam-fonts-code:'Fira Code',monospace;--beam-shadows-lg:0px 4px 20px rgba(0,0,0,0.45);--beam-shadows-md:0px 4px 4px rgba(0,0,0,0.25),inset 0px -2px 2px rgba(255,255,255,0.07);--beam-shadows-sm:inset 0px -2px 2px rgba(255,255,255,0.07),0px 2px 2px rgba(0,0,0,0.25);--beam-shadows-text:0px 1px 0px rgba(255,255,255,0.10);--beam-shadows-neon:0px 0px 10px rgba(216,162,239,0.50);--beam-shadows-inner:inset 0px -2px 2px 0px rgba(255,255,255,0.07);--beam-shadows-border:inset 0 0 0 1px var(--beam-colors-mono-900);--beam-shadows-border-active:inset 0 0 0 1px rgba(255,255,255,0.65);--beam-shadows-border-error:inset 0 0 0 1px var(--beam-colors-red-500);--beam-colors-mono-0:#FFFFFF;--beam-colors-mono-100:#F1F1F1;--beam-colors-mono-111:#242424;--beam-colors-mono-200:#DEE7E1;--beam-colors-mono-222:#222222;--beam-colors-mono-300:#6D6D6D;--beam-colors-mono-333:#151515;--beam-colors-mono-400:#313131;--beam-colors-mono-444:#393939;--beam-colors-mono-555:#272727;--beam-colors-mono-666:#d7d7d7;--beam-colors-mono-777:#04040b;--beam-colors-mono-900:#131313;--beam-colors-mono-1000:#000000;--beam-colors-green-400:#60ff83;--beam-colors-green-500:#48dd13;--beam-colors-red-400:#ff5544;--beam-colors-red-500:#ff4539;--beam-colors-orange-200:#fea514;--beam-colors-orange-600:#ff5c00;--beam-colors-purple-200:#ebbcff;--beam-spacing-0:0;--beam-spacing-1:.25rem;--beam-spacing-2:.5rem;--beam-spacing-3:.75rem;--beam-spacing-4:1rem;--beam-spacing-5:1.125rem;--beam-spacing-6:1.5rem;--beam-spacing-7:1.75rem;--beam-spacing-8:2rem;--beam-spacing-9:2.25rem;--beam-spacing-10:2.5rem;--beam-spacing-11:2.75rem;--beam-spacing-12:3rem;--beam-spacing-14:3.5rem;--beam-spacing-16:4rem;--beam-spacing-20:5rem;--beam-spacing-24:6rem;--beam-spacing-28:7rem;--beam-spacing-32:8rem;--beam-spacing-36:9rem;--beam-spacing-40:10rem;--beam-spacing-44:11rem;--beam-spacing-48:12rem;--beam-spacing-52:13rem;--beam-spacing-56:14rem;--beam-spacing-60:15rem;--beam-spacing-64:16rem;--beam-spacing-72:18rem;--beam-spacing-80:20rem;--beam-spacing-96:24rem;--beam-spacing-0\.5:.125rem;--beam-spacing-1\.5:.375rem;--beam-spacing-2\.5:.625rem;--beam-spacing-3\.5:.875rem;--beam-radii-none:0;--beam-radii-xs:.25rem;--beam-radii-sm:.5rem;--beam-radii-md:.75rem;--beam-radii-lg:1rem;--beam-radii-xl:1.5rem;--beam-radii-2xl:2rem;--beam-radii-3xl:2.5rem;--beam-radii-full:999rem;--beam-durations-x-slow:1000ms;--beam-durations-slow:400ms;--beam-durations-normal:300ms;--beam-durations-fast:200ms;--beam-durations-x-fast:100ms;--beam-durations-none:0ms;--beam-assets-noise:url("data:image/svg+xml,%3csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='a'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23a)'/%3e%3c/svg%3e");--beam-assets-grid:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cpattern id='a' width='2' height='2' patternUnits='userSpaceOnUse'%3e%3cpath d='M2 0H0v2' fill='none' stroke='%232b2b2a'/%3e%3c/pattern%3e%3c/defs%3e%3crect width='100%25' height='100%25' fill='url(%23a)'/%3e%3c/svg%3e");--beam-breakpoints-sm:40rem;--beam-breakpoints-md:48rem;--beam-breakpoints-lg:64rem;--beam-breakpoints-xl:80rem;--beam-breakpoints-2xl:96rem;--beam-sizes-breakpoint-sm:40rem;--beam-sizes-breakpoint-md:48rem;--beam-sizes-breakpoint-lg:64rem;--beam-sizes-breakpoint-xl:80rem;--beam-sizes-breakpoint-2xl:96rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}@keyframes scroll{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes barStripe{0%{transform:translate(0%)}to{transform:translate(-50%)}}}

dist/tokens/index.js

@@ -6,2 +6,6 @@ const tokens = {
   },
+  "fonts.code": {
+    "value": "'Fira Code', monospace",
+    "variable": "var(--beam-fonts-code)"
+  },
   "shadows.lg": {
@@ -23,2 +27,10 @@ "value": "0px 4px 20px rgba(0, 0, 0, 0.45)",
   },
+  "shadows.neon": {
+    "value": "0px 0px 10px rgba(216, 162, 239, 0.50)",
+    "variable": "var(--beam-shadows-neon)"
+  },
+  "shadows.inner": {
+    "value": "inset 0px -2px 2px 0px rgba(255, 255, 255, 0.07)",
+    "variable": "var(--beam-shadows-inner)"
+  },
   "shadows.border": {
@@ -44,2 +56,6 @@ "value": "inset 0 0 0 1px var(--beam-colors-mono-900)",
   },
+  "colors.mono.111": {
+    "value": "#242424",
+    "variable": "var(--beam-colors-mono-111)"
+  },
   "colors.mono.200": {
@@ -49,2 +65,6 @@ "value": "#DEE7E1",
   },
+  "colors.mono.222": {
+    "value": "#222222",
+    "variable": "var(--beam-colors-mono-222)"
+  },
   "colors.mono.300": {
@@ -54,2 +74,6 @@ "value": "#6D6D6D",
   },
+  "colors.mono.333": {
+    "value": "#151515",
+    "variable": "var(--beam-colors-mono-333)"
+  },
   "colors.mono.400": {
@@ -59,2 +83,18 @@ "value": "#313131",
   },
+  "colors.mono.444": {
+    "value": "#393939",
+    "variable": "var(--beam-colors-mono-444)"
+  },
+  "colors.mono.555": {
+    "value": "#272727",
+    "variable": "var(--beam-colors-mono-555)"
+  },
+  "colors.mono.666": {
+    "value": "#d7d7d7",
+    "variable": "var(--beam-colors-mono-666)"
+  },
+  "colors.mono.777": {
+    "value": "#04040b",
+    "variable": "var(--beam-colors-mono-777)"
+  },
   "colors.mono.900": {
@@ -232,2 +272,6 @@ "value": "#131313",
   },
+  "radii.none": {
+    "value": "0",
+    "variable": "var(--beam-radii-none)"
+  },
   "radii.xs": {
@@ -266,3 +310,3 @@ "value": ".25rem",
   "durations.xSlow": {
-    "value": "500ms",
+    "value": "1000ms",
     "variable": "var(--beam-durations-x-slow)"
@@ -482,2 +526,6 @@ },
   },
+  "colors.colorPalette.111": {
+    "value": "var(--beam-colors-color-palette-111)",
+    "variable": "var(--beam-colors-color-palette-111)"
+  },
   "colors.colorPalette.200": {
@@ -487,2 +535,6 @@ "value": "var(--beam-colors-color-palette-200)",
   },
+  "colors.colorPalette.222": {
+    "value": "var(--beam-colors-color-palette-222)",
+    "variable": "var(--beam-colors-color-palette-222)"
+  },
   "colors.colorPalette.300": {
@@ -492,2 +544,6 @@ "value": "var(--beam-colors-color-palette-300)",
   },
+  "colors.colorPalette.333": {
+    "value": "var(--beam-colors-color-palette-333)",
+    "variable": "var(--beam-colors-color-palette-333)"
+  },
   "colors.colorPalette.400": {
@@ -497,2 +553,18 @@ "value": "var(--beam-colors-color-palette-400)",
   },
+  "colors.colorPalette.444": {
+    "value": "var(--beam-colors-color-palette-444)",
+    "variable": "var(--beam-colors-color-palette-444)"
+  },
+  "colors.colorPalette.555": {
+    "value": "var(--beam-colors-color-palette-555)",
+    "variable": "var(--beam-colors-color-palette-555)"
+  },
+  "colors.colorPalette.666": {
+    "value": "var(--beam-colors-color-palette-666)",
+    "variable": "var(--beam-colors-color-palette-666)"
+  },
+  "colors.colorPalette.777": {
+    "value": "var(--beam-colors-color-palette-777)",
+    "variable": "var(--beam-colors-color-palette-777)"
+  },
   "colors.colorPalette.900": {
@@ -499,0 +571,0 @@ "value": "var(--beam-colors-color-palette-900)",

dist/tokens/tokens.d.ts

 /* eslint-disable */
-export type Token = "fonts.main" | "shadows.lg" | "shadows.md" | "shadows.sm" | "shadows.text" | "shadows.border" | "shadows.border.active" | "shadows.border.error" | "colors.mono.0" | "colors.mono.100" | "colors.mono.200" | "colors.mono.300" | "colors.mono.400" | "colors.mono.900" | "colors.mono.1000" | "colors.green.400" | "colors.green.500" | "colors.red.400" | "colors.red.500" | "colors.orange.200" | "colors.orange.600" | "colors.purple.200" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.full" | "durations.xSlow" | "durations.slow" | "durations.normal" | "durations.fast" | "durations.xFast" | "durations.none" | "assets.noise" | "assets.grid" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "colors.colorPalette.0" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.900" | "colors.colorPalette.1000" | "colors.colorPalette.500" | "colors.colorPalette.600"
+export type Token = "fonts.main" | "fonts.code" | "shadows.lg" | "shadows.md" | "shadows.sm" | "shadows.text" | "shadows.neon" | "shadows.inner" | "shadows.border" | "shadows.border.active" | "shadows.border.error" | "colors.mono.0" | "colors.mono.100" | "colors.mono.111" | "colors.mono.200" | "colors.mono.222" | "colors.mono.300" | "colors.mono.333" | "colors.mono.400" | "colors.mono.444" | "colors.mono.555" | "colors.mono.666" | "colors.mono.777" | "colors.mono.900" | "colors.mono.1000" | "colors.green.400" | "colors.green.500" | "colors.red.400" | "colors.red.500" | "colors.orange.200" | "colors.orange.600" | "colors.purple.200" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.full" | "durations.xSlow" | "durations.slow" | "durations.normal" | "durations.fast" | "durations.xFast" | "durations.none" | "assets.noise" | "assets.grid" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "colors.colorPalette.0" | "colors.colorPalette.100" | "colors.colorPalette.111" | "colors.colorPalette.200" | "colors.colorPalette.222" | "colors.colorPalette.300" | "colors.colorPalette.333" | "colors.colorPalette.400" | "colors.colorPalette.444" | "colors.colorPalette.555" | "colors.colorPalette.666" | "colors.colorPalette.777" | "colors.colorPalette.900" | "colors.colorPalette.1000" | "colors.colorPalette.500" | "colors.colorPalette.600"
 
 export type ColorPalette = "mono" | "green" | "red" | "orange" | "purple"
 
-export type FontToken = "main"
+export type FontToken = "main" | "code"
 
-export type ShadowToken = "lg" | "md" | "sm" | "text" | "border" | "border.active" | "border.error"
+export type ShadowToken = "lg" | "md" | "sm" | "text" | "neon" | "inner" | "border" | "border.active" | "border.error"
 
-export type ColorToken = "mono.0" | "mono.100" | "mono.200" | "mono.300" | "mono.400" | "mono.900" | "mono.1000" | "green.400" | "green.500" | "red.400" | "red.500" | "orange.200" | "orange.600" | "purple.200" | "colorPalette.0" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.900" | "colorPalette.1000" | "colorPalette.500" | "colorPalette.600"
+export type ColorToken = "mono.0" | "mono.100" | "mono.111" | "mono.200" | "mono.222" | "mono.300" | "mono.333" | "mono.400" | "mono.444" | "mono.555" | "mono.666" | "mono.777" | "mono.900" | "mono.1000" | "green.400" | "green.500" | "red.400" | "red.500" | "orange.200" | "orange.600" | "purple.200" | "colorPalette.0" | "colorPalette.100" | "colorPalette.111" | "colorPalette.200" | "colorPalette.222" | "colorPalette.300" | "colorPalette.333" | "colorPalette.400" | "colorPalette.444" | "colorPalette.555" | "colorPalette.666" | "colorPalette.777" | "colorPalette.900" | "colorPalette.1000" | "colorPalette.500" | "colorPalette.600"
 
 export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5"
 
-export type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
+export type RadiusToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
 
@@ -24,3 +24,3 @@ export type DurationToken = "xSlow" | "slow" | "normal" | "fast" | "xFast" | "none"
 
-export type AnimationName = "fadeIn" | "fadeOut" | "blink" | "scroll"
+export type AnimationName = "fadeIn" | "fadeOut" | "blink" | "scroll" | "barStripe"
 
@@ -27,0 +27,0 @@ export type Tokens = {

dist/types/prop-type.d.ts

@@ -174,3 +174,3 @@ /* eslint-disable */
 	colorPalette: "mono" | "green" | "red" | "orange" | "purple";
-	textStyle: "xl" | "md" | "base" | "sm" | "xs" | "marquee" | "header" | "caption";
+	textStyle: "xl" | "md" | "base" | "sm" | "xs" | "marquee" | "header" | "caption" | "code";
 }
@@ -177,0 +177,0 @@

package.json

 {
   "name": "@onbeam/styled-system",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "sideEffects": false,
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1447685

0.34%

Lines of code

32608

0.42%

No dependency changes