npm - @quieto/design-tokens - Versions diffs - 1.0.0 → 1.0.1 - Mend

@quieto/design-tokens 1.0.0 → 1.0.1

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 (4) hide show

package/dist/js/tokens.js CHANGED Viewed

@@ -433,6 +433,31 @@ export const tokens = [
     },
     "modeInvariant": true
   },
+  {
+    "name": "qds-color-black-5",
+    "path": [
+      "color",
+      "black",
+      "5"
+    ],
+    "type": "color",
+    "tier": "primitive",
+    "set": "primitive/color",
+    "description": null,
+    "modes": {
+      "light": "rgba(0, 0, 0, 0.05)",
+      "dark": "rgba(0, 0, 0, 0.05)"
+    },
+    "references": {
+      "light": [],
+      "dark": []
+    },
+    "referenceNames": {
+      "light": [],
+      "dark": []
+    },
+    "modeInvariant": true
+  },
   {
     "name": "qds-color-black-10",
     "path": [
@@ -509,19 +534,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-black-5",
+    "name": "qds-color-black-60",
     "path": [
       "color",
       "black",
-      "5"
+      "60"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "rgba(0, 0, 0, 0.05)",
-      "dark": "rgba(0, 0, 0, 0.05)"
+      "light": "rgba(0, 0, 0, 0.6)",
+      "dark": "rgba(0, 0, 0, 0.6)"
     },
     "references": {
       "light": [],
@@ -534,19 +559,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-black-60",
+    "name": "qds-color-blue-50",
     "path": [
       "color",
-      "black",
-      "60"
+      "blue",
+      "50"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "rgba(0, 0, 0, 0.6)",
-      "dark": "rgba(0, 0, 0, 0.6)"
+      "light": "#eff6ff",
+      "dark": "#eff6ff"
     },
     "references": {
       "light": [],
@@ -658,31 +683,6 @@ export const tokens = [
     },
     "modeInvariant": true
   },
-  {
-    "name": "qds-color-blue-50",
-    "path": [
-      "color",
-      "blue",
-      "50"
-    ],
-    "type": "color",
-    "tier": "primitive",
-    "set": "primitive/color",
-    "description": null,
-    "modes": {
-      "light": "#eff6ff",
-      "dark": "#eff6ff"
-    },
-    "references": {
-      "light": [],
-      "dark": []
-    },
-    "referenceNames": {
-      "light": [],
-      "dark": []
-    },
-    "modeInvariant": true
-  },
   {
     "name": "qds-color-blue-500",
     "path": [
@@ -809,19 +809,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-green-100",
+    "name": "qds-color-green-50",
     "path": [
       "color",
       "green",
-      "100"
+      "50"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#d1fae5",
-      "dark": "#d1fae5"
+      "light": "#ecfdf5",
+      "dark": "#ecfdf5"
     },
     "references": {
       "light": [],
@@ -834,19 +834,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-green-200",
+    "name": "qds-color-green-100",
     "path": [
       "color",
       "green",
-      "200"
+      "100"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#a7f3d0",
-      "dark": "#a7f3d0"
+      "light": "#d1fae5",
+      "dark": "#d1fae5"
     },
     "references": {
       "light": [],
@@ -859,19 +859,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-green-300",
+    "name": "qds-color-green-200",
     "path": [
       "color",
       "green",
-      "300"
+      "200"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#6ee7b7",
-      "dark": "#6ee7b7"
+      "light": "#a7f3d0",
+      "dark": "#a7f3d0"
     },
     "references": {
       "light": [],
@@ -884,19 +884,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-green-400",
+    "name": "qds-color-green-300",
     "path": [
       "color",
       "green",
-      "400"
+      "300"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#34d399",
-      "dark": "#34d399"
+      "light": "#6ee7b7",
+      "dark": "#6ee7b7"
     },
     "references": {
       "light": [],
@@ -909,19 +909,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-green-50",
+    "name": "qds-color-green-400",
     "path": [
       "color",
       "green",
-      "50"
+      "400"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#ecfdf5",
-      "dark": "#ecfdf5"
+      "light": "#34d399",
+      "dark": "#34d399"
     },
     "references": {
       "light": [],
@@ -1059,19 +1059,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-neutral-100",
+    "name": "qds-color-neutral-50",
     "path": [
       "color",
       "neutral",
-      "100"
+      "50"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#f1f5f9",
-      "dark": "#f1f5f9"
+      "light": "#f8fafc",
+      "dark": "#f8fafc"
     },
     "references": {
       "light": [],
@@ -1084,19 +1084,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-neutral-200",
+    "name": "qds-color-neutral-100",
     "path": [
       "color",
       "neutral",
-      "200"
+      "100"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#e2e8f0",
-      "dark": "#e2e8f0"
+      "light": "#f1f5f9",
+      "dark": "#f1f5f9"
     },
     "references": {
       "light": [],
@@ -1109,19 +1109,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-neutral-300",
+    "name": "qds-color-neutral-200",
     "path": [
       "color",
       "neutral",
-      "300"
+      "200"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#cbd5e1",
-      "dark": "#cbd5e1"
+      "light": "#e2e8f0",
+      "dark": "#e2e8f0"
     },
     "references": {
       "light": [],
@@ -1134,19 +1134,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-neutral-400",
+    "name": "qds-color-neutral-300",
     "path": [
       "color",
       "neutral",
-      "400"
+      "300"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#94a3b8",
-      "dark": "#94a3b8"
+      "light": "#cbd5e1",
+      "dark": "#cbd5e1"
     },
     "references": {
       "light": [],
@@ -1159,19 +1159,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-neutral-50",
+    "name": "qds-color-neutral-400",
     "path": [
       "color",
       "neutral",
-      "50"
+      "400"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#f8fafc",
-      "dark": "#f8fafc"
+      "light": "#94a3b8",
+      "dark": "#94a3b8"
     },
     "references": {
       "light": [],
@@ -1334,19 +1334,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-purple-100",
+    "name": "qds-color-purple-50",
     "path": [
       "color",
       "purple",
-      "100"
+      "50"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#ede9fe",
-      "dark": "#ede9fe"
+      "light": "#f5f3ff",
+      "dark": "#f5f3ff"
     },
     "references": {
       "light": [],
@@ -1359,19 +1359,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-purple-200",
+    "name": "qds-color-purple-100",
     "path": [
       "color",
       "purple",
-      "200"
+      "100"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#ddd6fe",
-      "dark": "#ddd6fe"
+      "light": "#ede9fe",
+      "dark": "#ede9fe"
     },
     "references": {
       "light": [],
@@ -1384,19 +1384,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-purple-300",
+    "name": "qds-color-purple-200",
     "path": [
       "color",
       "purple",
-      "300"
+      "200"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#c4b5fd",
-      "dark": "#c4b5fd"
+      "light": "#ddd6fe",
+      "dark": "#ddd6fe"
     },
     "references": {
       "light": [],
@@ -1409,19 +1409,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-purple-400",
+    "name": "qds-color-purple-300",
     "path": [
       "color",
       "purple",
-      "400"
+      "300"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#a78bfa",
-      "dark": "#a78bfa"
+      "light": "#c4b5fd",
+      "dark": "#c4b5fd"
     },
     "references": {
       "light": [],
@@ -1434,19 +1434,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-purple-50",
+    "name": "qds-color-purple-400",
     "path": [
       "color",
       "purple",
-      "50"
+      "400"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#f5f3ff",
-      "dark": "#f5f3ff"
+      "light": "#a78bfa",
+      "dark": "#a78bfa"
     },
     "references": {
       "light": [],
@@ -1584,19 +1584,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-red-100",
+    "name": "qds-color-red-50",
     "path": [
       "color",
       "red",
-      "100"
+      "50"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fee2e2",
-      "dark": "#fee2e2"
+      "light": "#fef2f2",
+      "dark": "#fef2f2"
     },
     "references": {
       "light": [],
@@ -1609,19 +1609,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-red-200",
+    "name": "qds-color-red-100",
     "path": [
       "color",
       "red",
-      "200"
+      "100"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fecaca",
-      "dark": "#fecaca"
+      "light": "#fee2e2",
+      "dark": "#fee2e2"
     },
     "references": {
       "light": [],
@@ -1634,19 +1634,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-red-300",
+    "name": "qds-color-red-200",
     "path": [
       "color",
       "red",
-      "300"
+      "200"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fca5a5",
-      "dark": "#fca5a5"
+      "light": "#fecaca",
+      "dark": "#fecaca"
     },
     "references": {
       "light": [],
@@ -1659,19 +1659,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-red-400",
+    "name": "qds-color-red-300",
     "path": [
       "color",
       "red",
-      "400"
+      "300"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#f87171",
-      "dark": "#f87171"
+      "light": "#fca5a5",
+      "dark": "#fca5a5"
     },
     "references": {
       "light": [],
@@ -1684,19 +1684,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-red-50",
+    "name": "qds-color-red-400",
     "path": [
       "color",
       "red",
-      "50"
+      "400"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fef2f2",
-      "dark": "#fef2f2"
+      "light": "#f87171",
+      "dark": "#f87171"
     },
     "references": {
       "light": [],
@@ -1834,19 +1834,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-teal-100",
+    "name": "qds-color-teal-50",
     "path": [
       "color",
       "teal",
-      "100"
+      "50"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#ccfbf1",
-      "dark": "#ccfbf1"
+      "light": "#f0fdfa",
+      "dark": "#f0fdfa"
     },
     "references": {
       "light": [],
@@ -1859,19 +1859,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-teal-200",
+    "name": "qds-color-teal-100",
     "path": [
       "color",
       "teal",
-      "200"
+      "100"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#99f6e4",
-      "dark": "#99f6e4"
+      "light": "#ccfbf1",
+      "dark": "#ccfbf1"
     },
     "references": {
       "light": [],
@@ -1884,19 +1884,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-teal-300",
+    "name": "qds-color-teal-200",
     "path": [
       "color",
       "teal",
-      "300"
+      "200"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#5eead4",
-      "dark": "#5eead4"
+      "light": "#99f6e4",
+      "dark": "#99f6e4"
     },
     "references": {
       "light": [],
@@ -1909,19 +1909,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-teal-400",
+    "name": "qds-color-teal-300",
     "path": [
       "color",
       "teal",
-      "400"
+      "300"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#2dd4bf",
-      "dark": "#2dd4bf"
+      "light": "#5eead4",
+      "dark": "#5eead4"
     },
     "references": {
       "light": [],
@@ -1934,19 +1934,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-teal-50",
+    "name": "qds-color-teal-400",
     "path": [
       "color",
       "teal",
-      "50"
+      "400"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#f0fdfa",
-      "dark": "#f0fdfa"
+      "light": "#2dd4bf",
+      "dark": "#2dd4bf"
     },
     "references": {
       "light": [],
@@ -2108,19 +2108,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-yellow-100",
+    "name": "qds-color-yellow-50",
     "path": [
       "color",
       "yellow",
-      "100"
+      "50"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fef3c7",
-      "dark": "#fef3c7"
+      "light": "#fffbeb",
+      "dark": "#fffbeb"
     },
     "references": {
       "light": [],
@@ -2133,19 +2133,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-yellow-200",
+    "name": "qds-color-yellow-100",
     "path": [
       "color",
       "yellow",
-      "200"
+      "100"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fde68a",
-      "dark": "#fde68a"
+      "light": "#fef3c7",
+      "dark": "#fef3c7"
     },
     "references": {
       "light": [],
@@ -2158,19 +2158,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-yellow-300",
+    "name": "qds-color-yellow-200",
     "path": [
       "color",
       "yellow",
-      "300"
+      "200"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fcd34d",
-      "dark": "#fcd34d"
+      "light": "#fde68a",
+      "dark": "#fde68a"
     },
     "references": {
       "light": [],
@@ -2183,19 +2183,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-yellow-400",
+    "name": "qds-color-yellow-300",
     "path": [
       "color",
       "yellow",
-      "400"
+      "300"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fbbf24",
-      "dark": "#fbbf24"
+      "light": "#fcd34d",
+      "dark": "#fcd34d"
     },
     "references": {
       "light": [],
@@ -2208,19 +2208,19 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-color-yellow-50",
+    "name": "qds-color-yellow-400",
     "path": [
       "color",
       "yellow",
-      "50"
+      "400"
     ],
     "type": "color",
     "tier": "primitive",
     "set": "primitive/color",
     "description": null,
     "modes": {
-      "light": "#fffbeb",
-      "dark": "#fffbeb"
+      "light": "#fbbf24",
+      "dark": "#fbbf24"
     },
     "references": {
       "light": [],
@@ -15853,18 +15853,18 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-opacity-100",
+    "name": "qds-opacity-25",
     "path": [
       "opacity",
-      "100"
+      "25"
     ],
     "type": "number",
     "tier": "primitive",
     "set": "primitive/opacity",
     "description": null,
     "modes": {
-      "light": 1,
-      "dark": 1
+      "light": 0.25,
+      "dark": 0.25
     },
     "references": {
       "light": [],
@@ -15877,18 +15877,18 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-opacity-25",
+    "name": "qds-opacity-50",
     "path": [
       "opacity",
-      "25"
+      "50"
     ],
     "type": "number",
     "tier": "primitive",
     "set": "primitive/opacity",
     "description": null,
     "modes": {
-      "light": 0.25,
-      "dark": 0.25
+      "light": 0.5,
+      "dark": 0.5
     },
     "references": {
       "light": [],
@@ -15901,18 +15901,18 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-opacity-50",
+    "name": "qds-opacity-75",
     "path": [
       "opacity",
-      "50"
+      "75"
     ],
     "type": "number",
     "tier": "primitive",
     "set": "primitive/opacity",
     "description": null,
     "modes": {
-      "light": 0.5,
-      "dark": 0.5
+      "light": 0.75,
+      "dark": 0.75
     },
     "references": {
       "light": [],
@@ -15925,18 +15925,18 @@ export const tokens = [
     "modeInvariant": true
   },
   {
-    "name": "qds-opacity-75",
+    "name": "qds-opacity-100",
     "path": [
       "opacity",
-      "75"
+      "100"
     ],
     "type": "number",
     "tier": "primitive",
     "set": "primitive/opacity",
     "description": null,
     "modes": {
-      "light": 0.75,
-      "dark": 0.75
+      "light": 1,
+      "dark": 1
     },
     "references": {
       "light": [],