@atlaskit/tokens 1.0.0 → 1.2.0

package/dist/esm/entry-points/tokens-raw.js

@@ -1,4 +1,5 @@
 export { default as light } from '../artifacts/tokens-raw/atlassian-light';
 export { default as dark } from '../artifacts/tokens-raw/atlassian-dark';
 export { default as spacing } from '../artifacts/tokens-raw/atlassian-spacing';
-export { default as typography } from '../artifacts/tokens-raw/atlassian-typography';
+export { default as typography } from '../artifacts/tokens-raw/atlassian-typography';
+export { default as shape } from '../artifacts/tokens-raw/atlassian-shape';

package/dist/esm/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.0.0";
+var version = "1.2.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/esm/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';
 var name = "@atlaskit/tokens";
-var version = "1.0.0";
+var version = "1.2.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/esm/palettes/shape-palette.js

@@ -0,0 +1,63 @@
+/**
+ * Types are inferred from the base tokens below
+ */
+
+var baseSizeTokens = {
+  Size050: {
+    value: '0.0625rem',
+    attributes: {
+      group: 'shape'
+    }
+  },
+  Size100: {
+    value: '0.125rem',
+    attributes: {
+      group: 'shape'
+    }
+  }
+};
+var baseRadiusTokens = {
+  Radius050: {
+    value: '0.125rem',
+    attributes: {
+      group: 'shape'
+    }
+  },
+  Radius100: {
+    value: '0.25rem',
+    attributes: {
+      group: 'shape'
+    }
+  },
+  Radius200: {
+    value: '0.5rem',
+    attributes: {
+      group: 'shape'
+    }
+  },
+  Radius300: {
+    value: '0.75rem',
+    attributes: {
+      group: 'shape'
+    }
+  },
+  Radius400: {
+    value: '1rem',
+    attributes: {
+      group: 'shape'
+    }
+  },
+  RadiusCircle: {
+    value: '50%',
+    attributes: {
+      group: 'shape'
+    }
+  }
+};
+var shapePalette = {
+  border: {
+    radius: baseRadiusTokens,
+    width: baseSizeTokens
+  }
+};
+export default shapePalette;

package/dist/esm/palettes/spacing-scale.js

@@ -6,94 +6,91 @@ var baseSpacingTokens = {
   Space0: {
     value: '0',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space025: {
     value: '0.125rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space050: {
     value: '0.25rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space075: {
     value: '0.375rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space100: {
     value: '0.5rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space150: {
     value: '0.75rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space200: {
     value: '1rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space250: {
     value: '1.25rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space300: {
     value: '1.5rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space400: {
     value: '2rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space500: {
     value: '2.5rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space600: {
     value: '3rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space800: {
     value: '4rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     },
     pixelValue: '64px'
   },
   Space1000: {
     value: '5rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     },
     pixelValue: '80px'
   }
 };
 var spacingPalette = {
-  spacing: {
-    scale: baseSpacingTokens
-  },
   space: baseSpacingTokens
 };
 export default spacingPalette;

package/dist/esm/palettes/typography-palette.js

@@ -6,37 +6,37 @@ var lineHeightScale = {
     LineHeight100: {
       value: '16px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight200: {
       value: '20px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight300: {
       value: '24px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight400: {
       value: '28px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight500: {
       value: '32px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight600: {
       value: '40px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     }
   }
@@ -46,25 +46,25 @@ var fontWeightScale = {
     FontWeightRegular: {
       value: '400',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontWeightMedium: {
       value: '500',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontWeightSemiBold: {
       value: '600',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontWeightBold: {
       value: '700',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     }
   }
@@ -74,13 +74,13 @@ var fontFamilyPalette = {
     FontFamilySans: {
       value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontFamilyMonospace: {
       value: "\"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace",
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     }
   }
@@ -90,49 +90,49 @@ var fontSizeScale = {
     FontSize050: {
       value: '11px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize075: {
       value: '12px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize100: {
       value: '14px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize200: {
       value: '16px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize300: {
       value: '20px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize400: {
       value: '24px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize500: {
       value: '29px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize600: {
       value: '35px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     }
   }

package/dist/esm/theme-config.js

@@ -27,7 +27,7 @@ export var themeColorModes = ['light', 'dark', 'auto'];
  *
  * These ids must be kebab case
  */
-export var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography'];
+export var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape'];
 var themeConfig = {
   'atlassian-light': {
     id: 'light',
@@ -80,6 +80,14 @@ var themeConfig = {
     attributes: {
       type: 'typography'
     }
+  },
+  'atlassian-shape': {
+    id: 'shape',
+    displayName: 'Atlassian Shape',
+    palette: 'shapePalette',
+    attributes: {
+      type: 'shape'
+    }
   }
 };
 export default themeConfig;

package/dist/esm/tokens/atlassian-shape/shape.js

@@ -0,0 +1,37 @@
+/**
+ * This is combined with the attribute schema.
+ * @link 'file:../default/shape/shape.tsx'
+ */
+var shape = {
+  border: {
+    width: {
+      '050': {
+        value: 'Size050'
+      },
+      '100': {
+        value: 'Size100'
+      }
+    },
+    radius: {
+      '050': {
+        value: 'Radius050'
+      },
+      '100': {
+        value: 'Radius100'
+      },
+      '200': {
+        value: 'Radius200'
+      },
+      '300': {
+        value: 'Radius300'
+      },
+      '400': {
+        value: 'Radius400'
+      },
+      round: {
+        value: 'RadiusCircle'
+      }
+    }
+  }
+};
+export default shape;

package/dist/esm/tokens/atlassian-spacing/spacing.js

@@ -49,233 +49,6 @@ var spacing = {
     '1000': {
       value: 'Space1000'
     }
-  },
-  // original namespace under 'spacing' this is the same as above
-  spacing: {
-    scale: {
-      '0': {
-        value: 'Space0'
-      },
-      '025': {
-        value: 'Space025'
-      },
-      '050': {
-        value: 'Space050'
-      },
-      '075': {
-        value: 'Space075'
-      },
-      '100': {
-        value: 'Space100'
-      },
-      '150': {
-        value: 'Space150'
-      },
-      '200': {
-        value: 'Space200'
-      },
-      '250': {
-        value: 'Space250'
-      },
-      '300': {
-        value: 'Space300'
-      },
-      '400': {
-        value: 'Space400'
-      },
-      '500': {
-        value: 'Space500'
-      },
-      '600': {
-        value: 'Space600'
-      },
-      '800': {
-        value: 'Space800'
-      },
-      '1000': {
-        value: 'Space1000'
-      }
-    },
-    scaleLinear: {
-      '0': {
-        value: 'Space0'
-      },
-      '100': {
-        value: 'Space025'
-      },
-      '200': {
-        value: 'Space050'
-      },
-      '300': {
-        value: 'Space075'
-      },
-      '400': {
-        value: 'Space100'
-      },
-      '500': {
-        value: 'Space150'
-      },
-      '600': {
-        value: 'Space200'
-      },
-      '700': {
-        value: 'Space250'
-      },
-      '800': {
-        value: 'Space300'
-      },
-      '900': {
-        value: 'Space400'
-      },
-      '1000': {
-        value: 'Space500'
-      },
-      '1100': {
-        value: 'Space600'
-      }
-    },
-    size: {
-      none: {
-        value: 'Space0'
-      },
-      xxxxSmall: {
-        value: 'Space025'
-      },
-      xxxSmall: {
-        value: 'Space050'
-      },
-      xxSmall: {
-        value: 'Space075'
-      },
-      xsmall: {
-        value: 'Space100'
-      },
-      small: {
-        value: 'Space150'
-      },
-      medium: {
-        value: 'Space200'
-      },
-      large: {
-        value: 'Space250'
-      },
-      xlarge: {
-        value: 'Space300'
-      },
-      xxlarge: {
-        value: 'Space400'
-      },
-      xxxlarge: {
-        value: 'Space500'
-      },
-      xxxxlarge: {
-        value: 'Space600'
-      }
-    },
-    ecl: {
-      element: {
-        '2': {
-          value: 'Space025'
-        },
-        '4': {
-          value: 'Space050'
-        },
-        '6': {
-          value: 'Space075'
-        },
-        '8': {
-          value: 'Space100'
-        }
-      },
-      container: {
-        '12': {
-          value: 'Space150'
-        },
-        '16': {
-          value: 'Space200'
-        },
-        '20': {
-          value: 'Space250'
-        },
-        '24': {
-          value: 'Space300'
-        }
-      },
-      layout: {
-        '32': {
-          value: 'Space400'
-        },
-        '40': {
-          value: 'Space500'
-        },
-        '64': {
-          value: 'Space600'
-        }
-      }
-    },
-    ccc: {
-      component: {
-        '2': {
-          value: 'Space025'
-        },
-        '4': {
-          value: 'Space050'
-        },
-        '6': {
-          value: 'Space075'
-        },
-        '8': {
-          value: 'Space100'
-        }
-      },
-      content: {
-        '12': {
-          value: 'Space150'
-        },
-        '16': {
-          value: 'Space200'
-        },
-        '20': {
-          value: 'Space250'
-        },
-        '24': {
-          value: 'Space300'
-        }
-      },
-      container: {
-        '32': {
-          value: 'Space400'
-        },
-        '40': {
-          value: 'Space500'
-        },
-        '48': {
-          value: 'Space600'
-        }
-      }
-    },
-    gap: {
-      '100': {
-        value: 'Space100'
-      },
-      '200': {
-        value: 'Space200'
-      },
-      '300': {
-        value: 'Space300'
-      }
-    },
-    inset: {
-      '100': {
-        value: 'Space100'
-      },
-      '200': {
-        value: 'Space200'
-      },
-      '300': {
-        value: 'Space300'
-      }
-    }
   }
 };
 export default spacing;