@atlaskit/tokens 0.10.16 → 0.10.19

package/dist/es2019/artifacts/tokens-raw/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f6a9d19d9e568ee23ce24a7127ceb09c>>
+ * @codegen <<SignedSource::6977decc7ef870a337b1171d6775d9dc>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -6479,7 +6479,7 @@ const tokens = [{
     "group": "shadow",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Use to create a shadow when content scolls under other content."
+    "description": "Use to create a shadow when content scrolls under other content."
   },
   "value": [{
     "radius": 8,
@@ -6505,7 +6505,7 @@ const tokens = [{
       "group": "shadow",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Use to create a shadow when content scolls under other content."
+      "description": "Use to create a shadow when content scrolls under other content."
     },
     "value": [{
       "radius": 8,
@@ -6664,6 +6664,48 @@ const tokens = [{
   },
   "name": "elevation.surface.overlay",
   "path": ["elevation", "surface", "overlay"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to images when in a disabled state."
+  },
+  "value": 0.4,
+  "filePath": "src/tokens/atlassian-light/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to images when in a disabled state."
+    },
+    "value": "Opacity40"
+  },
+  "name": "opacity.disabled",
+  "path": ["opacity", "disabled"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to content that sits under a loading spinner."
+  },
+  "value": 0.2,
+  "filePath": "src/tokens/atlassian-light/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to content that sits under a loading spinner."
+    },
+    "value": "Opacity20"
+  },
+  "name": "opacity.loading",
+  "path": ["opacity", "loading"]
 }, {
   "attributes": {
     "group": "raw",

package/dist/es2019/constants.js

@@ -1,10 +1,13 @@
-export const THEMES = ['light', 'dark'];
+export const THEMES = ['light', 'dark', 'legacy-light', 'legacy-dark'];
 export const THEME_DATA_ATTRIBUTE = 'data-theme';
 export const DEFAULT_THEME = 'light';
-export const CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code
+export const CSS_PREFIX = 'ds';
+export const CSS_VAR_FULL = ['opacity']; // Maps the longer theme name to a shorthand used in css/code
 
 export const THEME_NAME_MAP = {
   'atlassian-light': 'light',
-  'atlassian-dark': 'dark'
+  'atlassian-dark': 'dark',
+  'atlassian-legacy-light': 'legacy-light',
+  'atlassian-legacy-dark': 'legacy-dark'
 };
 export const TOKEN_NOT_FOUND_CSS_VAR = `--${CSS_PREFIX}-token-not-found`;

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "0.10.16";
+const version = "0.10.19";
 
 function token(path, fallback) {
   let token = tokens[path];

package/dist/es2019/palettes/legacy-palette.js

@@ -4,8 +4,33 @@
  * This palette should be exclusively used for backwards compatible themes
  */
 const palette = {
+  value: {
+    opacity: {
+      Opacity20: {
+        value: 0.2,
+        attributes: {
+          group: 'palette',
+          category: 'opacity'
+        }
+      },
+      Opacity40: {
+        value: 0.4,
+        attributes: {
+          group: 'palette',
+          category: 'opacity'
+        }
+      }
+    }
+  },
   color: {
     palette: {
+      transparent: {
+        value: 'transparent',
+        attributes: {
+          group: 'palette',
+          category: 'red'
+        }
+      },
       R50: {
         value: '#FFEBE6',
         attributes: {
@@ -434,119 +459,119 @@ const palette = {
         }
       },
       N10A: {
-        value: 'rgba(9, 30, 66, 0.02)',
+        value: '#091e425',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N20A: {
-        value: 'rgba(9, 30, 66, 0.04)',
+        value: '#091e42a',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N30A: {
-        value: 'rgba(9, 30, 66, 0.08)',
+        value: '#091e4214',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N40A: {
-        value: 'rgba(9, 30, 66, 0.13)',
+        value: '#091e4221',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N50A: {
-        value: 'rgba(9, 30, 66, 0.25)',
+        value: '#091e423f',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N60A: {
-        value: 'rgba(9, 30, 66, 0.31)',
+        value: '#091e424f',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N70A: {
-        value: 'rgba(9, 30, 66, 0.36)',
+        value: '#091e425b',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N80A: {
-        value: 'rgba(9, 30, 66, 0.42)',
+        value: '#091e426b',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N90A: {
-        value: 'rgba(9, 30, 66, 0.48)',
+        value: '#091e427a',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N100A: {
-        value: 'rgba(9, 30, 66, 0.54)',
+        value: '#091e4289',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N200A: {
-        value: 'rgba(9, 30, 66, 0.60)',
+        value: '#091e4299',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N300A: {
-        value: 'rgba(9, 30, 66, 0.66)',
+        value: '#091e42a8',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N400A: {
-        value: 'rgba(9, 30, 66, 0.71)',
+        value: '#091e42b5',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N500A: {
-        value: 'rgba(9, 30, 66, 0.77)',
+        value: '#091e42c4',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N600A: {
-        value: 'rgba(9, 30, 66, 0.82)',
+        value: '#091e42d1',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N700A: {
-        value: 'rgba(9, 30, 66, 0.89)',
+        value: '#091e42e2',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
         }
       },
       N800A: {
-        value: 'rgba(9, 30, 66, 0.95)',
+        value: '#091e42f2',
         attributes: {
           group: 'palette',
           category: 'light mode neutral'
@@ -686,119 +711,119 @@ const palette = {
         }
       },
       DN800A: {
-        value: 'rgba(13, 20, 36, 0.06)',
+        value: '#0d1424f',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN700A: {
-        value: 'rgba(13, 20, 36, 0.14)',
+        value: '#0d142423',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN600A: {
-        value: 'rgba(13, 20, 36, 0.18)',
+        value: '#0d14242d',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN500A: {
-        value: 'rgba(13, 20, 36, 0.29)',
+        value: '#0d142449',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN400A: {
-        value: 'rgba(13, 20, 36, 0.36)',
+        value: '#0d14245b',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN300A: {
-        value: 'rgba(13, 20, 36, 0.40)',
+        value: '#0d142466',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN200A: {
-        value: 'rgba(13, 20, 36, 0.47)',
+        value: '#0d142477',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN100A: {
-        value: 'rgba(13, 20, 36, 0.53)',
+        value: '#0d142487',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN90A: {
-        value: 'rgba(13, 20, 36, 0.63)',
+        value: '#0d1424a0',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN80A: {
-        value: 'rgba(13, 20, 36, 0.73)',
+        value: '#0d1424ba',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN70A: {
-        value: 'rgba(13, 20, 36, 0.78)',
+        value: '#0d1424c6',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN60A: {
-        value: 'rgba(13, 20, 36, 0.81)',
+        value: '#0d1424ce',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN50A: {
-        value: 'rgba(13, 20, 36, 0.85)',
+        value: '#0d1424d8',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN40A: {
-        value: 'rgba(13, 20, 36, 0.89)',
+        value: '#0d1424e2',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN30A: {
-        value: 'rgba(13, 20, 36, 0.92)',
+        value: '#0d1424ea',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN20A: {
-        value: 'rgba(13, 20, 36, 0.95)',
+        value: '#0d1424f2',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN10A: {
-        value: 'rgba(13, 20, 36, 0.97)',
+        value: '#0d1424f7',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'

package/dist/es2019/palettes/palette.js

@@ -1,4 +1,22 @@
 const palette = {
+  value: {
+    opacity: {
+      Opacity20: {
+        value: 0.2,
+        attributes: {
+          group: 'palette',
+          category: 'opacity'
+        }
+      },
+      Opacity40: {
+        value: 0.4,
+        attributes: {
+          group: 'palette',
+          category: 'opacity'
+        }
+      }
+    }
+  },
   color: {
     palette: {
       B100: {

package/dist/es2019/tokens/atlassian-dark/opacity/opacity.js

@@ -0,0 +1,11 @@
+const opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+export default opacity;