diff --git a/docs/config.json b/docs/config.json
index 554550f222..d366b49f2d 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -19,7 +19,7 @@
"menuSections": [
"Themes",
"Assets",
- "Core",
+ "Design System",
"Calendar",
"Components",
"Global",
diff --git a/docs/src/components/code/index.tsx b/docs/src/components/code/index.tsx
index 196cae3a54..56ab5ce22a 100644
--- a/docs/src/components/code/index.tsx
+++ b/docs/src/components/code/index.tsx
@@ -9,6 +9,7 @@ import * as Pagination from '@heathmont/moon-pagination';
import * as Sidebar from '@heathmont/moon-sidebar';
import * as Calendar from '@heathmont/moon-calendar';
import * as Table from '@heathmont/moon-table';
+import * as Core from '@heathmont/moon-core';
import { useTheme } from '@heathmont/moon-themes';
import { prismTheme } from './prism';
@@ -59,6 +60,7 @@ export const Code = ({ codeString, ...props }: CodeProps) => {
scope={{
...Assets,
...Components,
+ ...Core,
...Utils,
...Pagination,
...Sidebar,
diff --git a/packages/components/src/badge/README.mdx b/packages/components/src/badge/README.mdx
index a398e4423b..23303111cf 100644
--- a/packages/components/src/badge/README.mdx
+++ b/packages/components/src/badge/README.mdx
@@ -6,9 +6,38 @@ route: /components/badge
# Badge
+### ⚠️ This component is deprecated.
+
+It's still available but planned for removal.
+
+Use design system [Badge](/core/badge) instead.
+
+## Migration guide
+
+### Set proper size
+
+Set `size="small"` if size wasn't set.
+
+```
+Active -> Active
+```
+
+### Change size props
+
+`xsmall` -> `small`
+
+`small` -> `default`
+
+```
+Example -> Example
+Example -> Example
+```
+
+## Outdated documentation
+
Default size count and labeling component
-```jsx react-live
+```
Active
@@ -18,7 +47,7 @@ Default size count and labeling component
You coud simply use `color` and `backgroundColor` props
-```jsx react-live
+```
Active
@@ -36,7 +65,7 @@ You coud simply use `color` and `backgroundColor` props
You coud simply use `size` prop. By default size is xSmall. You can change it to Small.
-```jsx react-live
+```
xSmall size
diff --git a/packages/core/README.md b/packages/core/README.md
index 3b616f93d9..d742e750e0 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -1 +1 @@
-# Core
+# Design System
diff --git a/packages/core/src/badge/Badge.ts b/packages/core/src/badge/Badge.ts
index 0b1f65a018..c604f36b27 100644
--- a/packages/core/src/badge/Badge.ts
+++ b/packages/core/src/badge/Badge.ts
@@ -5,7 +5,7 @@ import { ColorProps } from '@heathmont/moon-themes';
export type BadgeProps = {
color?: ColorProps;
backgroundColor?: ColorProps;
- size?: 'xsmall' | 'small';
+ size?: 'small' | 'default';
};
const Badge = styled.span(
@@ -17,19 +17,27 @@ const Badge = styled.span(
letterSpacing: rem(1), // TODO
}),
({ size }) => ({
- padding: size === 'small' ? `0 ${rem(8)}` : `0 ${rem(4)}`,
- fontSize: size === 'small' ? rem(10) : rem(8),
- lineHeight: size === 'small' ? rem(16) : rem(12),
+ padding: size === 'small' ? `0 ${rem(4)}` : `0 ${rem(8)}`,
+ fontSize: size === 'small' ? rem(8) : rem(10),
+ lineHeight: size === 'small' ? rem(12) : rem(16),
}),
/* If a color or backgroundColor is set, override the modifier styles. */
({ color, backgroundColor, theme }) => ({
- color: themed('color', color)(theme),
+ color: color ? themed('color', color)(theme) : theme.color.goten[100],
backgroundColor: themed('color', backgroundColor)(theme),
})
);
Badge.defaultProps = {
- size: 'xsmall',
+ size: 'default',
+ color: 'goten.100',
+ backgroundColor: 'piccolo.100',
};
+/*
+default
+color - goten
+backgroundColor - piccolo.100
+*/
+
export default Badge;
diff --git a/packages/core/src/badge/README.mdx b/packages/core/src/badge/README.mdx
index 2c7bd8af93..e24d8ba65f 100644
--- a/packages/core/src/badge/README.mdx
+++ b/packages/core/src/badge/README.mdx
@@ -1,32 +1,44 @@
---
name: Badge
-menu: Core
+menu: Design System
route: /core/badge
---
# Badge
-Default size count and labeling component
+Small count and labeling component.
+
+## Usage:
+
+```
+import { Badge } from '@heathmont/moon-core';
+```
```jsx react-live
-
- Active
-
+Active
```
## Customize colours
-You coud simply use `color` and `backgroundColor` props
+You could use `color` and `backgroundColor` props.
+
+Default colours are:
+
+```
+color="goten.100"
+
+backgroundColor="piccolo.100"
+```
```jsx react-live
-
+
Active
Active
-
+
Active
@@ -34,13 +46,21 @@ You coud simply use `color` and `backgroundColor` props
## Customize size
-You coud simply use `size` prop. By default size is xSmall. You can change it to Small.
+You could use `size` prop.
+
+By default size is `default`.
+
+Possible sizes are `small` and `default`.
+
+```
+size= "small" | "default"
+
+```
```jsx react-live
- xSmall size
-
- small size
-
+ Small
+ Default
+ Default
```