npm - @wistia/vhs-design-tokens - Versions diffs - 2.0.0 → 2.0.1-beta.560cb1e9.d80a57d - Mend

@wistia/vhs-design-tokens 2.0.0 → 2.0.1-beta.560cb1e9.d80a57d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/css/design-tokens.css +9 -1
package/dist/js/colorMetadata.js +219 -1
package/dist/js/designTokens.js +175 -2
package/dist/scss/_design-tokens.scss +9 -1
package/index.d.ts +9 -0
package/package.json +1 -1

package/dist/css/design-tokens.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 14 Feb 2024 18:07:47 GMT
+ * Generated on Wed, 06 Mar 2024 00:56:46 GMT
  */
 :root {
@@ -65,6 +65,14 @@
   --color-yellow-600: #9ea00f;
   --color-yellow-700: #7c7e07;
   --color-yellow-800: #4a4d00;
+  --color-orange-100: #fff9f8;
+  --color-orange-200: #ffcaba;
+  --color-orange-300: #ff9d80;
+  --color-orange-400: #ff6c40;
+  --color-orange-500: #d1451a;
+  --color-orange-600: #b23009;
+  --color-orange-700: #80280d;
+  --color-orange-800: #4d1200;
   --color-grey-100: #f8f8f9;
   --color-grey-200: #ebebed;
   --color-grey-300: #dedee1;

package/dist/js/colorMetadata.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 14 Feb 2024 18:07:47 GMT
+ * Generated on Wed, 06 Mar 2024 00:56:46 GMT
  */
 module.exports = {
@@ -1531,6 +1531,224 @@ module.exports = {
         ]
       }
     },
+    "orange": {
+      "100": {
+        "value": "#fff9f8",
+        "conformance": {
+          "black": "AAA",
+          "white": null
+        },
+        "filePath": "tokens/color.yaml",
+        "isSource": true,
+        "original": {
+          "value": "#FFF9F8",
+          "conformance": {
+            "black": "AAA",
+            "white": null
+          }
+        },
+        "name": "ColorOrange100",
+        "attributes": {
+          "category": "color",
+          "type": "orange",
+          "item": "100"
+        },
+        "path": [
+          "color",
+          "orange",
+          "100"
+        ]
+      },
+      "200": {
+        "value": "#ffcaba",
+        "conformance": {
+          "black": "AAA",
+          "white": null
+        },
+        "filePath": "tokens/color.yaml",
+        "isSource": true,
+        "original": {
+          "value": "#FFCABA",
+          "conformance": {
+            "black": "AAA",
+            "white": null
+          }
+        },
+        "name": "ColorOrange200",
+        "attributes": {
+          "category": "color",
+          "type": "orange",
+          "item": "200"
+        },
+        "path": [
+          "color",
+          "orange",
+          "200"
+        ]
+      },
+      "300": {
+        "value": "#ff9d80",
+        "conformance": {
+          "black": "AAA",
+          "white": null
+        },
+        "filePath": "tokens/color.yaml",
+        "isSource": true,
+        "original": {
+          "value": "#FF9D80",
+          "conformance": {
+            "black": "AAA",
+            "white": null
+          }
+        },
+        "name": "ColorOrange300",
+        "attributes": {
+          "category": "color",
+          "type": "orange",
+          "item": "300"
+        },
+        "path": [
+          "color",
+          "orange",
+          "300"
+        ]
+      },
+      "400": {
+        "value": "#ff6c40",
+        "conformance": {
+          "black": "AAA",
+          "white": "null"
+        },
+        "filePath": "tokens/color.yaml",
+        "isSource": true,
+        "original": {
+          "value": "#FF6C40",
+          "conformance": {
+            "black": "AAA",
+            "white": "null"
+          }
+        },
+        "name": "ColorOrange400",
+        "attributes": {
+          "category": "color",
+          "type": "orange",
+          "item": "400"
+        },
+        "path": [
+          "color",
+          "orange",
+          "400"
+        ]
+      },
+      "500": {
+        "value": "#d1451a",
+        "conformance": {
+          "black": "AA",
+          "white": "AA"
+        },
+        "filePath": "tokens/color.yaml",
+        "isSource": true,
+        "original": {
+          "value": "#D1451A",
+          "conformance": {
+            "black": "AA",
+            "white": "AA"
+          }
+        },
+        "name": "ColorOrange500",
+        "attributes": {
+          "category": "color",
+          "type": "orange",
+          "item": "500"
+        },
+        "path": [
+          "color",
+          "orange",
+          "500"
+        ]
+      },
+      "600": {
+        "value": "#b23009",
+        "conformance": {
+          "black": null,
+          "white": "AA"
+        },
+        "filePath": "tokens/color.yaml",
+        "isSource": true,
+        "original": {
+          "value": "#B23009",
+          "conformance": {
+            "black": null,
+            "white": "AA"
+          }
+        },
+        "name": "ColorOrange600",
+        "attributes": {
+          "category": "color",
+          "type": "orange",
+          "item": "600"
+        },
+        "path": [
+          "color",
+          "orange",
+          "600"
+        ]
+      },
+      "700": {
+        "value": "#80280d",
+        "conformance": {
+          "black": null,
+          "white": "AAA"
+        },
+        "filePath": "tokens/color.yaml",
+        "isSource": true,
+        "original": {
+          "value": "#80280D",
+          "conformance": {
+            "black": null,
+            "white": "AAA"
+          }
+        },
+        "name": "ColorOrange700",
+        "attributes": {
+          "category": "color",
+          "type": "orange",
+          "item": "700"
+        },
+        "path": [
+          "color",
+          "orange",
+          "700"
+        ]
+      },
+      "800": {
+        "value": "#4d1200",
+        "conformance": {
+          "black": null,
+          "white": "AAA"
+        },
+        "filePath": "tokens/color.yaml",
+        "isSource": true,
+        "original": {
+          "value": "#4D1200",
+          "conformance": {
+            "black": null,
+            "white": "AAA"
+          }
+        },
+        "name": "ColorOrange800",
+        "attributes": {
+          "category": "color",
+          "type": "orange",
+          "item": "800"
+        },
+        "path": [
+          "color",
+          "orange",
+          "800"
+        ]
+      }
+    },
     "grey": {
       "100": {
         "value": "#f8f8f9",

package/dist/js/designTokens.js CHANGED Viewed

@@ -1,6 +1,179 @@
 /**
  * Do not edit directly
- * Generated on Wed, 14 Feb 2024 18:07:47 GMT
+ * Generated on Wed, 06 Mar 2024 00:56:46 GMT
  */
-[object Promise]
+module.exports = {
+  breakpoint: {
+    xs: '0em',
+    sm: '37.5em',
+    md: '56.5625em',
+    lg: '77.5em',
+    xl: '90em',
+  },
+  color: {
+    brandBlue100: '#e5e9ff',
+    brandBlue200: '#ccd5ff',
+    brandBlue300: '#99abff',
+    brandBlue400: '#6b84ff',
+    brandBlue500: '#2949e5',
+    brandBlue600: '#1f3399',
+    brandBlue700: '#222d66',
+    brandBlue800: '#000934',
+    purple100: '#fdf7ff',
+    purple200: '#f9e5ff',
+    purple300: '#f2caff',
+    purple400: '#e093fa',
+    purple500: '#d65cff',
+    purple600: '#ac12e0',
+    purple700: '#752e8c',
+    purple800: '#39004d',
+    green100: '#f4fff2',
+    green200: '#dfffd9',
+    green300: '#b0e5a5',
+    green400: '#76d962',
+    green500: '#44b62d',
+    green600: '#268713',
+    green700: '#38662e',
+    green800: '#093300',
+    blue100: '#e9f5ff',
+    blue200: '#c7e7ff',
+    blue300: '#91ceff',
+    blue400: '#58b7fe',
+    blue500: '#229fff',
+    blue600: '#1b7fde',
+    blue700: '#165fac',
+    blue800: '#0d407a',
+    pink100: '#fff8fc',
+    pink200: '#ffe5f4',
+    pink300: '#ffc7e8',
+    pink400: '#ff8cd0',
+    pink500: '#ff40b3',
+    pink600: '#e0128e',
+    pink700: '#661f4a',
+    pink800: '#4d002e',
+    red100: '#fff7f9',
+    red200: '#ffccd5',
+    red300: '#ff99ab',
+    red400: '#ff6682',
+    red500: '#ff2b51',
+    red600: '#d60027',
+    red700: '#99001c',
+    red800: '#660013',
+    yellow100: '#fffff0',
+    yellow200: '#eff18d',
+    yellow300: '#e8ec1e',
+    yellow400: '#d9dc25',
+    yellow500: '#bcbf19',
+    yellow600: '#9ea00f',
+    yellow700: '#7c7e07',
+    yellow800: '#4a4d00',
+    orange100: '#fff9f8',
+    orange200: '#ffcaba',
+    orange300: '#ff9d80',
+    orange400: '#ff6c40',
+    orange500: '#d1451a',
+    orange600: '#b23009',
+    orange700: '#80280d',
+    orange800: '#4d1200',
+    grey100: '#f8f8f9',
+    grey200: '#ebebed',
+    grey300: '#dedee1',
+    grey400: '#c4c4c8',
+    grey500: '#a3a3aa',
+    grey600: '#7b7b87',
+    grey700: '#62626c',
+    grey800: '#4a4a51',
+    grey900: '#37373c',
+    grey1000: '#1f1f22',
+    grey1100: '#0b0d0e',
+    error100: '#ffecec',
+    error200: '#ffcaca',
+    error300: '#ff9a9a',
+    error400: '#ff6962',
+    error500: '#fa4040',
+    error600: '#d63727',
+    error700: '#aa0d15',
+    error800: '#860011',
+    success100: '#e6f9f3',
+    success200: '#bfefe0',
+    success300: '#81e0c1',
+    success400: '#41d0a3',
+    success500: '#00c185',
+    success600: '#00966e',
+    success700: '#047063',
+    success800: '#025050',
+    warning100: '#fff8e6',
+    warning200: '#ffefc8',
+    warning300: '#ffdf96',
+    warning400: '#ffce5a',
+    warning500: '#fabe1f',
+    warning600: '#dc9601',
+    warning700: '#be7200',
+    warning800: '#b45101',
+  },
+  duration: {
+    productive: {
+      fast: '70ms',
+      moderate: '110ms',
+      slow: '150ms',
+    },
+    expressive: {
+      fast: '240ms',
+      moderate: '400ms',
+      slow: '700ms',
+    },
+  },
+  easing: {
+    standard: {
+      productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
+      expressive: 'cubic-bezier(0.4, 0.14, 0.3, 1)',
+    },
+    entrance: {
+      productive: 'cubic-bezier(0, 0, 0.38, 0.9)',
+      expressive: 'cubic-bezier(0, 0, 0.3, 1)',
+    },
+    exit: {
+      productive: 'cubic-bezier(0.2, 0, 1, 0.9)',
+      expressive: 'cubic-bezier(0.4, 0.14, 1, 1)',
+    },
+  },
+  font: {
+    family: {
+      default: 'Inter, Helvetica, Arial, sans-serif',
+      monospace: '"IBM Plex Mono", Consolas, Monaco, monospace',
+    },
+    weight: {
+      thin: 100,
+      extraLight: 200,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700,
+      extraBold: 800,
+    },
+    size: {
+      default: '16px',
+      small: '14px',
+    },
+  },
+  shadow: {
+    elevation0: 'none',
+    elevation1: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    elevation2: '0 0 64px 0 rgba(0, 0, 0, 0.08)',
+  },
+  spacing: {
+    space01: '4px',
+    space02: '8px',
+    space03: '12px',
+    space04: '16px',
+    space05: '24px',
+    space06: '32px',
+    space07: '48px',
+    space08: '64px',
+    space09: '80px',
+    space10: '96px',
+    space11: '120px',
+  },
+};

package/dist/scss/_design-tokens.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 // Do not edit directly
-// Generated on Wed, 14 Feb 2024 18:07:47 GMT
+// Generated on Wed, 06 Mar 2024 00:56:46 GMT
 $breakpoint-xs: 0em;
 $breakpoint-sm: 37.5em;
@@ -63,6 +63,14 @@ $color-yellow-500: #bcbf19;
 $color-yellow-600: #9ea00f;
 $color-yellow-700: #7c7e07;
 $color-yellow-800: #4a4d00;
+$color-orange-100: #fff9f8;
+$color-orange-200: #ffcaba;
+$color-orange-300: #ff9d80;
+$color-orange-400: #ff6c40;
+$color-orange-500: #d1451a;
+$color-orange-600: #b23009;
+$color-orange-700: #80280d;
+$color-orange-800: #4d1200;
 $color-grey-100: #f8f8f9;
 $color-grey-200: #ebebed;
 $color-grey-300: #dedee1;

package/index.d.ts CHANGED Viewed

@@ -120,6 +120,15 @@ declare module '@wistia/vhs-design-tokens' {
     readonly yellow700: CSSHexString;
     readonly yellow800: CSSHexString;
+    readonly orange100: CSSHexString;
+    readonly orange200: CSSHexString;
+    readonly orange300: CSSHexString;
+    readonly orange400: CSSHexString;
+    readonly orange500: CSSHexString;
+    readonly orange600: CSSHexString;
+    readonly orange700: CSSHexString;
+    readonly orange800: CSSHexString;
     readonly grey100: CSSHexString;
     readonly grey200: CSSHexString;
     readonly grey300: CSSHexString;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@wistia/vhs-design-tokens",
-  "version": "2.0.0",
+  "version": "2.0.1-beta.560cb1e9.d80a57d",
   "description": "VHS design tokens",
   "main": "index.js",
   "exports": {