feat(odyssey-tokens): adds odyssey-tokens package (#1124)

* feat(odyssey-tokens): adds odyssey-tokens package * chore(odyssey-design-tokens): update palette token structure, add comments for palette tokens * chore(odyssey-design-tokens): remove themeable design token attributes, update build approach * chore(odyssey-react): add button tokens * chore(odyssey-react): remove accidentally version controlled storybook-static directory * chore(odyssey-design-tokens): remove build script * chore(odyssey-design-tokens): update design token naming to reflect text component prop
okta · Nov 4, 2021 · a7ecd65 · a7ecd65
1 parent 0e71009
commit a7ecd65
Show file tree

Hide file tree

Showing 9 changed files with 474 additions and 1 deletion.
diff --git a/packages/odyssey-design-tokens/config.json b/packages/odyssey-design-tokens/config.json
@@ -0,0 +1,37 @@
+{
+  "source": ["src/**/*.json"],
+  "platforms": {
+    "js": {
+      "transformGroup": "js",
+      "files": [
+        {
+          "format": "javascript/es6",
+          "destination": "dist/js/tokens.js"
+        },
+        {
+          "format": "typescript/es6-declarations",
+          "destination": "dist/js/tokens.d.ts"
+        }
+      ]
+    },
+    "css": {
+      "transformGroup": "css",
+      "files": [
+        {
+          "format": "css/variables",
+          "destination": "dist/css/tokens.css"
+        }
+      ]
+    },
+    "scss": {
+      "transformGroup": "scss",
+      "files": [
+        {
+          "destination": "dist/scss/tokens.scss",
+          "format": "scss/map-deep",
+          "mapName": "ods-tokens"
+        }
+      ]
+    }
+  }
+}
diff --git a/packages/odyssey-design-tokens/package.json b/packages/odyssey-design-tokens/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@okta/odyssey-design-tokens",
+  "version": "0.0.0",
+  "main": "dist/js/tokens.js",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "style-dictionary build"
+  },
+  "dependencies": {
+    "style-dictionary": "^3.0.1"
+  }
+}
diff --git a/packages/odyssey-design-tokens/src/color.json b/packages/odyssey-design-tokens/src/color.json
@@ -0,0 +1,140 @@
+{
+  "color": {
+    "palette": {
+      "neutral": {
+        "white": {
+          "comment": "Used for page backgrounds, text",
+          "value": "#ffffff"
+        },
+        "000": {
+          "comment": "Used for Backgrounds, read-only & disabled input fills",
+          "value": "#f5f5f6"
+        },
+        "100": {
+          "comment": "Used for read-only/disabled states",
+          "value": "#ebebed"
+        },
+        "200": { "comment": "Used for Display borders", "value": "#d7d7dc" },
+        "500": {
+          "comment": "Used for Interactive UI borders",
+          "value": "#8c8c96"
+        },
+        "600": {
+          "comment": "Used for caption text, Status label, disabled Overlay Buttons",
+          "value": "#6e6e78"
+        },
+        "900": {
+          "comment": "Used for titles, body copy, icons, shadows, tooltips",
+          "value": "#1d1d21"
+        }
+      },
+      "blue": {
+        "000": {
+          "comment": "Used for clear button hover, backgrounds",
+          "value": "#f2f5ff"
+        },
+        "300": {
+          "comment": "Used for buttons disabled state fills & borders, focus rings",
+          "value": "#a7b5ec"
+        },
+        "400": {
+          "comment": "Used for a11y-friendly UI backgrounds",
+          "value": "#788ee2"
+        },
+        "500": {
+          "comment": "Used for links, buttons, icons, hover states, selected states",
+          "value": "#1662dd"
+        },
+        "900": {
+          "comment": "Used for okta logo, brand moments, button hovers",
+          "value": "#00297a"
+        }
+      },
+      "green": {
+        "000": {
+          "comment": "Used for moments of success, validation, wayfinding",
+          "value": "#e5faf3"
+        },
+        "300": { "comment": "N/A", "value": "#84d2b1" },
+        "500": {
+          "comment": "Used for moments of success, validation, wayfinding, status",
+          "value": "#00b478"
+        },
+        "600": {
+          "comment": "Used for background color for success messaging",
+          "value": "#008055"
+        },
+        "900": {
+          "comment": "Used for moments of success, validation, wayfinding",
+          "value": "#00503c"
+        }
+      },
+      "red": {
+        "000": {
+          "comment": "Used for system errors, danger buttons, error states",
+          "value": "#ffdfe2"
+        },
+        "300": {
+          "comment": "Used for danger button disabled state fills, borders, & focus ring",
+          "value": "#f88c90"
+        },
+        "500": {
+          "comment": "Used for system errors, danger buttons, error states, status dot",
+          "value": "#da372c"
+        },
+        "900": {
+          "comment": "Used for destructive button & invalid input hovers",
+          "value": "#640019"
+        }
+      },
+      "yellow": {
+        "000": { "comment": "Used for moments of caution", "value": "#faf5dc" },
+        "300": { "comment": "N/A", "value": "#f9dc77" },
+        "500": {
+          "comment": "Used for Moments of caution, status dot",
+          "value": "#ffc61c"
+        },
+        "900": { "comment": "Used for moments of caution", "value": "#663800" }
+      },
+      "orange": {
+        "500": { "comment": "N/A", "value": "#e97107" }
+      },
+      "turquoise": {
+        "400": { "comment": "Used for background color", "value": "#65adb7" },
+        "500": { "comment": "Used for brand moments", "value": "#2d8c9e" }
+      },
+      "purple": {
+        "500": {
+          "comment": "Used for Moments of learning, tips, brand moments",
+          "value": "#8d6e97"
+        }
+      }
+    },
+    "primary": {
+      "light": { "value": "{color.palette.blue.300.value}" },
+      "base": { "value": "{color.palette.blue.500.value}" },
+      "dark": { "value": "{color.palette.blue.900.value}" }
+    },
+    "danger": {
+      "value": {
+        "light": "{color.palette.red.300.value}"
+      },
+      "base": { "value": "{color.palette.red.500.value}" },
+      "dark": { "value": "{color.palette.red.900.value}" }
+    },
+    "text": {
+      "body": {
+        "comment": "Base text color used for most typography",
+        "value": "{color.palette.neutral.900.value}"
+      },
+      "bodyInverse": {
+        "comment": "Inverse text color typically used on a colorful background",
+        "value": "{color.palette.neutral.white.value}"
+      },
+      "primary": {
+        "comment": "Branded text color, primarily used within button",
+        "value": "{color.palette.blue.500.value}"
+      }
+    }
+  }
+}
diff --git a/packages/odyssey-design-tokens/src/components/button.json b/packages/odyssey-design-tokens/src/components/button.json
@@ -0,0 +1,60 @@
+{
+  "button": {
+    "color": {
+      "background": {
+        "primary": {
+          "comment": "Base primary background color",
+          "value": "{color.primary.base}"
+        },
+        "secondary": {
+          "comment": "Base secondary background color",
+          "value": "{color.palette.neutral.white.value}"
+        },
+        "danger": {
+          "comment": "Base danger background color",
+          "value": "{color.danger.base}"
+        },
+        "clear": {
+          "comment": "Base clear background color",
+          "value": "transparent"
+        }
+      },
+      "text": {
+        "primary": {
+          "comment": "Button primary text color",
+          "value": "{color.text.inverse.value}"
+        },
+        "secondary": {
+          "comment": "Button secondary text color",
+          "value": "{color.text.primary.value}"
+        },
+        "danger": {
+          "comment": "Button danger text color",
+          "value": "{color.text.inverse.value}"
+        },
+        "clear": {
+          "comment": "Button clear text color",
+          "value": "{color.text.inverse.value}"
+        }
+      }
+    },
+    "border": {
+      "primary": {
+        "comment": "Base primary background color",
+        "value": "{color.primary.base}"
+      },
+      "secondary": {
+        "comment": "Base secondary background color",
+        "value": "{color.primary.base}"
+      },
+      "danger": {
+        "comment": "Base danger background color",
+        "value": "{color.danger.base}"
+      },
+      "clear": {
+        "comment": "Base clear background color",
+        "value": "transparent"
+      }
+    }
+  }
+}
diff --git a/packages/odyssey-design-tokens/src/font.json b/packages/odyssey-design-tokens/src/font.json
@@ -0,0 +1,31 @@
+{
+  "font": {
+    "family": {
+      "base": {
+        "comment": "Default font used within all Okta product user interfaces",
+        "value": "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif"
+      },
+      "mono": {
+        "comment": "Monospace font used within all Okta product user interfaces",
+        "value": "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace"
+      }
+    },
+    "size": {
+      "base": { "value": "16" },
+      "scale": { "value": 1.1487 },
+      "body": {
+        "lede": { "value": "" },
+        "base": { "value": "" },
+        "caption": { "value": "" }
+      },
+      "title": {
+        "level-1": { "value": "" },
+        "level-2": { "value": "" },
+        "level-3": { "value": "" },
+        "level-4": { "value": "" },
+        "level-5": { "value": "" },
+        "level-6": { "value": "" }
+      }
+    }
+  }
+}
diff --git a/packages/odyssey-design-tokens/src/layer.json b/packages/odyssey-design-tokens/src/layer.json
@@ -0,0 +1,3 @@
+{
+  "layer": {}
+}
diff --git a/packages/odyssey-design-tokens/src/shadow.json b/packages/odyssey-design-tokens/src/shadow.json
@@ -0,0 +1,5 @@
+{
+  "shadow": {
+    "base": { "value": "0 2px 0 rgba(175, 175, 175, 0.12)" }
+  }
+}
diff --git a/packages/odyssey-design-tokens/src/space.json b/packages/odyssey-design-tokens/src/space.json
@@ -0,0 +1,9 @@
+{
+  "space": {
+    "m": "",
+    "l": "",
+    "xl": "",
+    "s": "",
+    "xs": ""
+  }
+}