@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/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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1447685

increased by0.34%

Lines of code

32608

increased by0.42%

No dependency changes