diff --git a/docs-src/src/layouts/Navigation.js b/docs-src/src/layouts/Navigation.js
index fbe7d3d2..9181130d 100644
--- a/docs-src/src/layouts/Navigation.js
+++ b/docs-src/src/layouts/Navigation.js
@@ -47,6 +47,9 @@ export default function Navigation() {
Design Tokens
+
+ Blur
+
Border Radius
@@ -60,7 +63,22 @@ export default function Navigation() {
Font Sizes
- Font Weights
+ Font Weights
+
+
+ Grid
+
+
+ Icon Sizes
+
+
+ Line Heights
+
+
+ Opacity
+
+
+ Screen Widths
Shadows
diff --git a/docs-src/src/pages/design-tokens.js b/docs-src/src/pages/design-tokens.js
index 188dc169..1e096b13 100644
--- a/docs-src/src/pages/design-tokens.js
+++ b/docs-src/src/pages/design-tokens.js
@@ -72,23 +72,6 @@ function ColorRows() {
return rows
}
-function Colors() {
- return (
-
- Colors
-
-
-
- Token
- Value
-
-
- {ColorRows()}
-
-
- )
-}
-
function FontSizeRows() {
const rows = []
const fontSizes = DesignTokens.font.size
@@ -120,23 +103,6 @@ function FontSizeRows() {
return rows
}
-function FontSizes() {
- return (
-
- Font Sizes
-
-
-
- Token
- Value
-
-
- {FontSizeRows()}
-
-
- )
-}
-
function FontRows() {
const rows = []
const fontFamilies = DesignTokens.font.family
@@ -168,23 +134,6 @@ function FontRows() {
return rows
}
-function Fonts() {
- return (
-
- Fonts
-
-
-
- Token
- Value
-
-
- {FontRows()}
-
-
- )
-}
-
function BorderRadiusRows() {
const rows = []
const radii = DesignTokens.border.radius
@@ -219,69 +168,6 @@ function BorderRadiusRows() {
return rows
}
-function BorderRadius() {
- return (
-
- Border Radius
-
-
-
- Token
- Value
-
-
- {BorderRadiusRows()}
-
-
- )
-}
-
-// TODO is exampleStyle necessary here? How can I eliminate this useless thang
-function ZIndexRows() {
- const rows = []
- const zIndices = DesignTokens['z-index']
-
- for (const index in zIndices) {
- const exampleStyle = {
- zIndex: zIndices[index].value,
- }
-
- rows.push(
-
-
- Token:
- ${zIndices[index].name}
- {zIndices[index].comment}
-
-
-
- Value:
- {zIndices[index].value}
-
-
- )
- }
-
- return rows
-}
-
-function ZIndex() {
- return (
-
- Z-Index
-
-
-
- Token
- Value
-
-
- {ZIndexRows()}
-
-
- )
-}
-
// TODO fix name not being displayed at same spacing as value!
function SpacingRows() {
const rows = []
@@ -315,23 +201,6 @@ function SpacingRows() {
return rows
}
-function Spacing() {
- return (
-
- Spacing
-
-
-
- Token
- Value
-
-
- {SpacingRows()}
-
-
- )
-}
-
function ShadowRows() {
const rows = []
const shadows = DesignTokens.box.shadow
@@ -366,23 +235,6 @@ function ShadowRows() {
return rows
}
-function Shadows() {
- return (
-
- Shadows
-
-
-
- Token
- Value
-
-
- {ShadowRows()}
-
-
- )
-}
-
function FontWeightRows() {
const rows = []
const fontWeights = DesignTokens.font.weight
@@ -416,10 +268,47 @@ function FontWeightRows() {
return rows
}
-function FontWeight() {
+function getTokenValue(token) {
+ if(!token || !token.value){
+ return null
+ }
+
+ if(Object.prototype.toString.call(token.value) === '[object Object]') {
+ return token.value.value
+ } else if (typeof token.value === 'string' ||token.value instanceof String)
+ return token.value
+ else {
+ return null
+ }
+}
+
+function NoExampleRows(tokens) {
+ const rows = []
+
+ const flattenedTokens = flattenDesignTokens(tokens)
+
+ for (const index in flattenedTokens) {
+ rows.push(
+
+
+ Token:
+ ${flattenedTokens[index].name}
+ {flattenedTokens[index].comment}
+
+
+
+ Value:
+ {getTokenValue(flattenedTokens[index])}
+
+
+ )
+ }
+
+ return rows
+}
+
+function DesignTokenTable({children}) {
return (
-
- Font Weights
@@ -427,9 +316,8 @@ function FontWeight() {
Value
- {FontWeightRows()}
+ {children}
-
)
}
@@ -451,14 +339,62 @@ function DesignTokensPage({location}) {
For more information on design tokens, check out the post here
-
-
-
-
-
-
-
-
+ Blur
+
+ {NoExampleRows(DesignTokens.blur)}
+
+ Border Radius
+
+ {BorderRadiusRows()}
+
+ Colors
+
+ {ColorRows()}
+
+ Fonts
+
+ {FontRows()}
+
+ Fonts Sizes
+
+ {FontSizeRows()}
+
+ Font Weights
+
+ {FontWeightRows()}
+
+ Grid
+
+ {NoExampleRows(DesignTokens.grid)}
+
+ Icon Sizes
+
+ {NoExampleRows(DesignTokens.icon.size)}
+
+ Line Heights
+
+ {NoExampleRows(DesignTokens["line-height"])}
+
+ Opacity
+
+ {NoExampleRows(DesignTokens.opacity)}
+
+ Screen Widths
+
+ {NoExampleRows(DesignTokens.screen.width)}
+
+ Shadows
+
+ {ShadowRows()}
+
+ Spacing
+
+ {SpacingRows()}
+
+ Z-Index
+
+ {NoExampleRows(DesignTokens['z-index'])}
+