diff --git a/.yarn/cache/@esbuild-darwin-x64-npm-0.17.19-30afb0190b-8.zip b/.yarn/cache/@esbuild-darwin-x64-npm-0.17.19-30afb0190b-8.zip
new file mode 100644
index 0000000000..ce0c4aa93b
Binary files /dev/null and b/.yarn/cache/@esbuild-darwin-x64-npm-0.17.19-30afb0190b-8.zip differ
diff --git a/.yarn/cache/@nrwl-nx-darwin-x64-npm-15.9.4-0fcdedd4f7-8.zip b/.yarn/cache/@nrwl-nx-darwin-x64-npm-15.9.4-0fcdedd4f7-8.zip
new file mode 100644
index 0000000000..f48b7e1918
Binary files /dev/null and b/.yarn/cache/@nrwl-nx-darwin-x64-npm-15.9.4-0fcdedd4f7-8.zip differ
diff --git a/.yarn/cache/@swc-core-darwin-x64-npm-1.3.59-8db1ec3a59-8.zip b/.yarn/cache/@swc-core-darwin-x64-npm-1.3.59-8db1ec3a59-8.zip
new file mode 100644
index 0000000000..6d91347831
Binary files /dev/null and b/.yarn/cache/@swc-core-darwin-x64-npm-1.3.59-8db1ec3a59-8.zip differ
diff --git a/packages/odyssey-design-tokens/src/border.json b/packages/odyssey-design-tokens/src/border.json
index 7592459411..475972d70a 100644
--- a/packages/odyssey-design-tokens/src/border.json
+++ b/packages/odyssey-design-tokens/src/border.json
@@ -1,14 +1,28 @@
{
"border": {
- "width": {
- "base": { "value": "1px" }
- },
- "style": {
- "base": { "value": "solid" }
+ "color": {
+ "ui": { "value": "{hue.neutral.500.value}" },
+ "display": { "value": "{hue.neutral.200.value}" },
+ "disabled": { "value": "{hue.neutral.200.value}" },
+ "danger": {
+ "light": { "value": "{palette.danger.light.value}" },
+ "main": { "value": "{palette.danger.main.value}" },
+ "dark": { "value": "{palette.danger.dark.value}" }
+ },
+ "primary": {
+ "main": { "value": "{palette.primary.main.value}" },
+ "dark": { "value": "{palette.primary.dark.value}" }
+ }
},
"radius": {
- "base": { "value": "4px" },
+ "main": { "value": "4px" },
"outer": { "value": "6px" }
+ },
+ "style": {
+ "main": { "value": "solid" }
+ },
+ "width": {
+ "main": { "value": "1px" }
}
}
}
diff --git a/packages/odyssey-design-tokens/src/color/background.json b/packages/odyssey-design-tokens/src/color/background.json
deleted file mode 100644
index 80d0a391d4..0000000000
--- a/packages/odyssey-design-tokens/src/color/background.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "color": {
- "background": {
- "base": { "value": "{color.palette.neutral.white.value}" },
- "disabled": { "value": "{color.palette.neutral.000.value}" },
- "primary": {
- "light": { "value": "{color.palette.blue.000.value}" },
- "base": { "value": "{color.palette.blue.300.value}" },
- "dark": { "value": "{color.palette.blue.900.value}" }
- },
- "danger": {
- "light": { "value": "{color.palette.red.000.value}" },
- "base": { "value": "{color.palette.red.300.value}" },
- "dark": { "value": "{color.palette.red.500.value}" }
- },
- "caution": {
- "light": { "value": "{color.palette.yellow.000.value}" },
- "base": { "value": "{color.palette.yellow.300.value}" },
- "dark": { "value": "{color.palette.yellow.500.value}" }
- },
- "success": {
- "light": { "value": "{color.palette.green.000.value}" },
- "base": { "value": "{color.palette.green.300.value}" },
- "dark": { "value": "{color.palette.green.600.value}" }
- }
- }
- }
-}
diff --git a/packages/odyssey-design-tokens/src/color/border.json b/packages/odyssey-design-tokens/src/color/border.json
deleted file mode 100644
index d853d6cb56..0000000000
--- a/packages/odyssey-design-tokens/src/color/border.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "color": {
- "border": {
- "ui": { "value": "{color.palette.neutral.500.value}" },
- "display": { "value": "{color.palette.neutral.200.value}" },
- "disabled": { "value": "{color.palette.neutral.200.value}" },
- "danger": {
- "light": { "value": "{color.danger.light.value}" },
- "base": { "value": "{color.danger.base.value}" },
- "dark": { "value": "{color.danger.dark.value}" }
- },
- "primary": {
- "base": { "value": "{color.primary.base.value}" },
- "dark": { "value": "{color.primary.dark.value}" }
- }
- }
- }
-}
diff --git a/packages/odyssey-design-tokens/src/color/functional.json b/packages/odyssey-design-tokens/src/color/functional.json
deleted file mode 100644
index 8b632332b1..0000000000
--- a/packages/odyssey-design-tokens/src/color/functional.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "color": {
- "primary": {
- "light": { "value": "{color.palette.blue.300.value}" },
- "base": { "value": "{color.palette.blue.500.value}" },
- "dark": { "value": "{color.palette.blue.900.value}" }
- },
- "danger": {
- "light": { "value": "{color.palette.red.300.value}" },
- "base": { "value": "{color.palette.red.500.value}" },
- "dark": { "value": "{color.palette.red.900.value}" }
- },
- "caution": {
- "light": { "value": "{color.palette.yellow.300.value}" },
- "base": { "value": "{color.palette.yellow.500.value}" },
- "dark": { "value": "{color.palette.yellow.900.value}" }
- },
- "success": {
- "light": { "value": "{color.palette.green.300.value}" },
- "base": { "value": "{color.palette.green.500.value}" }
- },
- "neutral": {
- "base": { "value": "{color.palette.neutral.600.value}" },
- "dark": { "value": "{color.palette.neutral.900.value}" }
- }
- }
-}
diff --git a/packages/odyssey-design-tokens/src/color/palette.json b/packages/odyssey-design-tokens/src/color/palette.json
deleted file mode 100644
index 4f6abcf2d6..0000000000
--- a/packages/odyssey-design-tokens/src/color/palette.json
+++ /dev/null
@@ -1,134 +0,0 @@
-{
- "color": {
- "palette": {
- "neutral": {
- "white": {
- "comment": "Used for page backgrounds, text",
- "value": "#ffffff"
- },
- "000": {
- "comment": "Used for backgrounds, read-only & disabled input fills",
- "value": "#f4f4f4"
- },
- "100": {
- "comment": "Used for read-only/disabled states",
- "value": "#ededed"
- },
- "200": {
- "comment": "Used for display borders",
- "value": "#e1e1e1"
- },
- "500": {
- "comment": "Used for interactive UI borders",
- "value": "#8d8d8d"
- },
- "600": {
- "comment": "Used for caption text, status label, disabled overlay buttons",
- "value": "#6e6e6e"
- },
- "900": {
- "comment": "Used for titles, body copy, icons, shadows, tooltips",
- "value": "#272727"
- }
- },
- "blue": {
- "000": {
- "comment": "Used for clear button hover, backgrounds",
- "value": "#f2f3fd"
- },
- "300": {
- "comment": "Used for buttons disabled state fills & borders, focus rings",
- "value": "#9daaf1"
- },
- "500": {
- "comment": "Used for links, buttons, icons, hover states, selected states",
- "value": "#4c64e1"
- },
- "900": {
- "comment": "Used for okta logo, brand moments, button hovers",
- "value": "#22307c"
- }
- },
- "green": {
- "000": {
- "comment": "Used for moments of success, validation, wayfinding",
- "value": "#defae7"
- },
- "300": {
- "comment": "n/a",
- "value": "#7be09e"
- },
- "500": {
- "comment": "Used for moments of success, validation, wayfinding, status",
- "value": "#197f48"
- },
- "600": {
- "comment": "n/a",
- "value": "#0e562f"
- },
- "900": {
- "comment": "Used for moments of success, validation, wayfinding",
- "value": "#0a4023"
- }
- },
- "red": {
- "000": {
- "comment": "Used for system errors, danger buttons, error states",
- "value": "#fff0ee"
- },
- "300": {
- "comment": "Used for danger button disabled state fills, borders, & focus ring",
- "value": "#febbae"
- },
- "500": {
- "comment": "Used for system errors, danger buttons, error states, status dot",
- "value": "#d92300"
- },
- "900": {
- "comment": "Used for destructive button & invalid input hovers",
- "value": "#711200"
- }
- },
- "yellow": {
- "000": {
- "comment": "Used for moments of caution",
- "value": "#fcf6ac"
- },
- "300": {
- "comment": "n/a",
- "value": "#f9c503"
- },
- "500": {
- "comment": "Used for moments of caution, status dot",
- "value": "#986603"
- },
- "900": {
- "comment": "Used for moments of caution",
- "value": "#4c3302"
- }
- },
- "orange": {
- "500": {
- "comment": "n/a",
- "value": "#ef9b05"
- }
- },
- "turquoise": {
- "400": {
- "comment": "Used for background color",
- "value": "#4cb7a3"
- },
- "500": {
- "comment": "Used for brand moments",
- "value": "#096256"
- }
- },
- "purple": {
- "500": {
- "comment": "Used for moments of learning, tips, brand moments",
- "value": "#4016a0"
- }
- }
- }
- }
-}
diff --git a/packages/odyssey-design-tokens/src/color/text.json b/packages/odyssey-design-tokens/src/color/text.json
deleted file mode 100644
index 9a9c153dfc..0000000000
--- a/packages/odyssey-design-tokens/src/color/text.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "color": {
- "text": {
- "body": {
- "comment": "Base text color used for most typography",
- "value": "{color.palette.neutral.900.value}"
- },
- "heading": {
- "comment": "Base text color used for headings",
- "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.primary.base.value}"
- },
- "sub": {
- "comment": "Text color for subordinate text like captions",
- "value": "{color.palette.neutral.600.value}"
- },
- "danger": { "value": "{color.danger.base.value}" }
- }
- }
-}
diff --git a/packages/odyssey-design-tokens/src/focus.json b/packages/odyssey-design-tokens/src/focus.json
index def6bceadc..3a2c847bde 100644
--- a/packages/odyssey-design-tokens/src/focus.json
+++ b/packages/odyssey-design-tokens/src/focus.json
@@ -2,16 +2,16 @@
"focus": {
"outline": {
"color": {
- "primary": { "value": "{color.primary.base.value}" },
- "danger": { "value": "{color.danger.base.value}" }
+ "primary": { "value": "{palette.primary.main.value}" },
+ "danger": { "value": "{palette.danger.main.value}" }
},
"offset": {
- "base": { "value": "2px" },
+ "main": { "value": "2px" },
"tight": { "value": "0" }
},
"style": { "value": "solid" },
"width": {
- "base": { "value": "2px" },
+ "main": { "value": "2px" },
"tight": { "value": "1px" }
}
}
diff --git a/packages/odyssey-design-tokens/src/font.json b/packages/odyssey-design-tokens/src/font.json
deleted file mode 100644
index 6770c8f584..0000000000
--- a/packages/odyssey-design-tokens/src/font.json
+++ /dev/null
@@ -1,60 +0,0 @@
-{
- "font": {
- "family": {
- "base": {
- "comment": "Default font used within all Okta product user interfaces",
- "value": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif"
- },
- "mono": {
- "comment": "Monospace font used within all Okta product user interfaces",
- "value": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace"
- }
- },
- "scale": {
- "0": { "value": "0.857rem" },
- "1": { "value": "1rem" },
- "2": { "value": "1.143rem" },
- "3": { "value": "1.286rem" },
- "4": { "value": "1.429rem" },
- "5": { "value": "1.571rem" },
- "6": { "value": "1.786rem" },
- "7": { "value": "2rem" },
- "8": { "value": "2.286rem" },
- "9": { "value": "2.571rem" },
- "10": { "value": "2.857rem" },
- "11": { "value": "3.214rem" },
- "12": { "value": "3.643rem" }
- },
- "size": {
- "base": { "value": "87.5%" },
- "caption": { "value": "{font.scale.0.value}" },
- "body": { "value": "{font.scale.1.value}" },
- "heading6": { "value": "{font.scale.2.value}" },
- "heading5": { "value": "{font.scale.3.value}" },
- "heading4": { "value": "{font.scale.5.value}" },
- "heading3": { "value": "{font.scale.7.value}" },
- "heading2": { "value": "{font.scale.8.value}" },
- "heading1": { "value": "{font.scale.9.value}" }
- },
- "style": {
- "normal": { "value": "normal" }
- },
- "weight": {
- "normal": { "value": "400" },
- "bold": { "value": "600" }
- },
- "lineHeight": {
- "body": { "value": 1.42857143 },
- "ui": { "value": 1.14285714 },
- "heading6": { "value": 1.25 },
- "heading5": { "value": 1.33333333 },
- "heading4": { "value": 1.27272727 },
- "heading3": { "value": 1.28 },
- "heading2": { "value": 1.28571429 },
- "heading1": { "value": 1.25 }
- },
- "lineLength": {
- "max": { "value": "32rem" }
- }
- }
-}
diff --git a/packages/odyssey-design-tokens/src/hue.json b/packages/odyssey-design-tokens/src/hue.json
new file mode 100644
index 0000000000..cc33a8b56e
--- /dev/null
+++ b/packages/odyssey-design-tokens/src/hue.json
@@ -0,0 +1,167 @@
+{
+ "hue": {
+ "neutral": {
+ "white": {
+ "value": "#ffffff"
+ },
+ "50": {
+ "value": "#f4f4f4"
+ },
+ "100": {
+ "value": "#ededed"
+ },
+ "200": {
+ "value": "#e1e1e1"
+ },
+ "300": {
+ "value": "#cbcbcb"
+ },
+ "400": {
+ "value": "#aeaeae"
+ },
+ "500": {
+ "value": "#8d8d8d"
+ },
+ "600": {
+ "value": "#6e6e6e"
+ },
+ "700": {
+ "value": "#4b4b4b"
+ },
+ "800": {
+ "value": "#383838"
+ },
+ "900": {
+ "value": "#272727"
+ }
+ },
+ "blue": {
+ "50": {
+ "value": "#f2f3fd"
+ },
+ "100": {
+ "value": "#dbe0fa"
+ },
+ "200": {
+ "value": "#c1c9f6"
+ },
+ "300": {
+ "value": "#9daaf1"
+ },
+ "400": {
+ "value": "#7286eb"
+ },
+ "500": {
+ "value": "#546be7"
+ },
+ "600": {
+ "value": "#4c64e1"
+ },
+ "700": {
+ "value": "#2e40a5"
+ },
+ "800": {
+ "value": "#22307c"
+ },
+ "900": {
+ "value": "#182257"
+ }
+ },
+ "green": {
+ "50": {
+ "value": "#defae7"
+ },
+ "100": {
+ "value": "#94f5b3"
+ },
+ "200": {
+ "value": "#7be09e"
+ },
+ "300": {
+ "value": "#59c282"
+ },
+ "400": {
+ "value": "#31a061"
+ },
+ "500": {
+ "value": "#16884a"
+ },
+ "600": {
+ "value": "#197f48"
+ },
+ "700": {
+ "value": "#0e562f"
+ },
+ "800": {
+ "value": "#0a4023"
+ },
+ "900": {
+ "value": "#072e19"
+ }
+ },
+ "red": {
+ "50": {
+ "value": "#fff0ee"
+ },
+ "100": {
+ "value": "#ffd8d1"
+ },
+ "200": {
+ "value": "#febbae"
+ },
+ "300": {
+ "value": "#fe8f7a"
+ },
+ "400": {
+ "value": "#fd4e2d"
+ },
+ "500": {
+ "value": "#e72500"
+ },
+ "600": {
+ "value": "#d92300"
+ },
+ "700": {
+ "value": "#951800"
+ },
+ "800": {
+ "value": "#711200"
+ },
+ "900": {
+ "value": "#500d00"
+ }
+ },
+ "yellow": {
+ "50": {
+ "value": "#fcf6ac"
+ },
+ "100": {
+ "value": "#fce101"
+ },
+ "200": {
+ "value": "#f9c503"
+ },
+ "300": {
+ "value": "#eb9e05"
+ },
+ "400": {
+ "value": "#bf8004"
+ },
+ "500": {
+ "value": "#a16c03"
+ },
+ "600": {
+ "value": "#986603"
+ },
+ "700": {
+ "value": "#664402"
+ },
+ "800": {
+ "value": "#4c3302"
+ },
+ "900": {
+ "value": "#352401"
+ }
+ }
+ }
+}
diff --git a/packages/odyssey-design-tokens/src/palette.json b/packages/odyssey-design-tokens/src/palette.json
new file mode 100644
index 0000000000..4a4aa74a5c
--- /dev/null
+++ b/packages/odyssey-design-tokens/src/palette.json
@@ -0,0 +1,32 @@
+{
+ "palette": {
+ "primary": {
+ "lighter": { "value": "{hue.blue.50.value}" },
+ "light": { "value": "{hue.blue.300.value}" },
+ "main": { "value": "{hue.blue.500.value}" },
+ "dark": { "value": "{hue.blue.900.value}" }
+ },
+ "danger": {
+ "lighter": { "value": "{hue.red.50.value}" },
+ "light": { "value": "{hue.red.300.value}" },
+ "main": { "value": "{hue.red.500.value}" },
+ "dark": { "value": "{hue.red.900.value}" }
+ },
+ "caution": {
+ "lighter": { "value": "{hue.yellow.50.value}" },
+ "light": { "value": "{hue.yellow.300.value}" },
+ "main": { "value": "{hue.yellow.500.value}" },
+ "dark": { "value": "{hue.yellow.900.value}" }
+ },
+ "success": {
+ "lighter": { "value": "{hue.green.50.value}" },
+ "light": { "value": "{hue.green.300.value}" },
+ "main": { "value": "{hue.green.500.value}" },
+ "dark": { "value": "{hue.green.900.value}" }
+ },
+ "neutral": {
+ "main": { "value": "{hue.neutral.600.value}" },
+ "dark": { "value": "{hue.neutral.900.value}" }
+ }
+ }
+}
diff --git a/packages/odyssey-design-tokens/src/space.json b/packages/odyssey-design-tokens/src/space.json
deleted file mode 100644
index d6cc38676c..0000000000
--- a/packages/odyssey-design-tokens/src/space.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "space": {
- "scale": {
- "0": { "value": "0.28571429rem" },
- "1": { "value": "0.57142857rem" },
- "2": { "value": "0.85714286rem" },
- "3": { "value": "1.14285714rem" },
- "4": { "value": "1.71428571rem" },
- "5": { "value": "2.28571429rem" },
- "6": { "value": "2.85714286rem" },
- "7": { "value": "3.42857143rem" },
- "8": { "value": "4rem" }
- }
- }
-}
diff --git a/packages/odyssey-design-tokens/src/spacing.json b/packages/odyssey-design-tokens/src/spacing.json
new file mode 100644
index 0000000000..87b74b87eb
--- /dev/null
+++ b/packages/odyssey-design-tokens/src/spacing.json
@@ -0,0 +1,14 @@
+{
+ "spacing": {
+ "0": { "value": "0" },
+ "1": { "value": "0.28571429rem" },
+ "2": { "value": "0.57142857rem" },
+ "3": { "value": "0.85714286rem" },
+ "4": { "value": "1.14285714rem" },
+ "5": { "value": "1.71428571rem" },
+ "6": { "value": "2.28571429rem" },
+ "7": { "value": "2.85714286rem" },
+ "8": { "value": "3.42857143rem" },
+ "9": { "value": "4rem" }
+ }
+}
diff --git a/packages/odyssey-design-tokens/src/transition.json b/packages/odyssey-design-tokens/src/transition.json
index 1fe99b50c1..2f77f106f9 100644
--- a/packages/odyssey-design-tokens/src/transition.json
+++ b/packages/odyssey-design-tokens/src/transition.json
@@ -1,10 +1,10 @@
{
"transition": {
"duration": {
- "base": { "value": "100ms" }
+ "main": { "value": "100ms" }
},
"timing": {
- "base": { "value": "linear" }
+ "main": { "value": "linear" }
}
}
}
diff --git a/packages/odyssey-design-tokens/src/typography.json b/packages/odyssey-design-tokens/src/typography.json
new file mode 100644
index 0000000000..da14947105
--- /dev/null
+++ b/packages/odyssey-design-tokens/src/typography.json
@@ -0,0 +1,90 @@
+{
+ "typography": {
+ "color": {
+ "body": {
+ "comment": "Base text color used for most typography",
+ "value": "{hue.neutral.900.value}"
+ },
+ "heading": {
+ "comment": "Base text color used for headings",
+ "value": "{hue.neutral.900.value}"
+ },
+ "bodyInverse": {
+ "comment": "Inverse text color typically used on a colorful background",
+ "value": "{hue.neutral.white.value}"
+ },
+ "primary": {
+ "comment": "Branded text color, primarily used within button",
+ "value": "{palette.primary.main.value}"
+ },
+ "sub": {
+ "comment": "Text color for subordinate text like captions",
+ "value": "{hue.neutral.600.value}"
+ },
+ "danger": { "value": "{palette.danger.main.value}" }
+ },
+ "family": {
+ "body": {
+ "value": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif"
+ },
+ "heading": {
+ "value": "'Aeonik', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif"
+ },
+ "button": {
+ "value": "{typography.family.heading.value}"
+ },
+ "mono": {
+ "value": "'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace"
+ }
+ },
+ "scale": {
+ "0": { "value": "0.857rem" },
+ "1": { "value": "1rem" },
+ "2": { "value": "1.143rem" },
+ "3": { "value": "1.286rem" },
+ "4": { "value": "1.429rem" },
+ "5": { "value": "1.571rem" },
+ "6": { "value": "1.786rem" },
+ "7": { "value": "2rem" },
+ "8": { "value": "2.286rem" },
+ "9": { "value": "2.571rem" },
+ "10": { "value": "2.857rem" },
+ "11": { "value": "3.214rem" },
+ "12": { "value": "3.643rem" }
+ },
+ "size": {
+ "base": { "value": "87.5%" },
+ "caption": { "value": "{typography.scale.0.value}" },
+ "body": { "value": "{typography.scale.1.value}" },
+ "heading6": { "value": "{typography.scale.2.value}" },
+ "heading5": { "value": "{typography.scale.3.value}" },
+ "heading4": { "value": "{typography.scale.5.value}" },
+ "heading3": { "value": "{typography.scale.7.value}" },
+ "heading2": { "value": "{typography.scale.8.value}" },
+ "heading1": { "value": "{typography.scale.9.value}" }
+ },
+ "style": {
+ "normal": { "value": "normal" }
+ },
+ "weight": {
+ "body": { "value": "400" },
+ "bodyBold": { "value": "600" },
+ "heading": { "value": "500" },
+ "headingBold": { "value": "700" }
+ },
+ "lineHeight": {
+ "body": { "value": 1.5 },
+ "ui": { "value": 1.2 },
+ "overline": { "value": 1.3 },
+ "heading6": { "value": 1.3 },
+ "heading5": { "value": 1.3 },
+ "heading4": { "value": 1.25 },
+ "heading3": { "value": 1.25 },
+ "heading2": { "value": 1.2 },
+ "heading1": { "value": 1.2 }
+ },
+ "lineLength": {
+ "max": { "value": "55ch" }
+ }
+ }
+}
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 6e6551f500..ca67e19405 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -1047,7 +1047,7 @@ export const components: ThemeOptions["components"] = {
styleOverrides: {
root: ({ ownerState, theme }) => ({
width: "100%",
- maxWidth: "32rem",
+ maxWidth: theme.mixins.maxWidth,
...(ownerState.margin === "normal" && {
marginTop: 0,
marginBottom: theme.spacing(5),
diff --git a/packages/odyssey-react-mui/src/theme/mixins.ts b/packages/odyssey-react-mui/src/theme/mixins.ts
index e8eaace5a8..255a4146aa 100644
--- a/packages/odyssey-react-mui/src/theme/mixins.ts
+++ b/packages/odyssey-react-mui/src/theme/mixins.ts
@@ -17,9 +17,9 @@ export const mixins = (
odysseyTokens: DesignTokensOverride
): ThemeOptions["mixins"] => {
return {
- maxWidth: odysseyTokens.FontLineLengthMax,
- borderRadius: odysseyTokens.BorderRadiusBase,
- borderStyle: odysseyTokens.BorderStyleBase,
- borderWidth: odysseyTokens.BorderWidthBase,
+ maxWidth: odysseyTokens.TypographyLineLengthMax,
+ borderRadius: odysseyTokens.BorderRadiusMain,
+ borderStyle: odysseyTokens.BorderStyleMain,
+ borderWidth: odysseyTokens.BorderWidthMain,
};
};
diff --git a/packages/odyssey-react-mui/src/theme/palette.ts b/packages/odyssey-react-mui/src/theme/palette.ts
index d13d82173e..2c15cd0e2d 100644
--- a/packages/odyssey-react-mui/src/theme/palette.ts
+++ b/packages/odyssey-react-mui/src/theme/palette.ts
@@ -20,78 +20,76 @@ export const palette = (
return {
mode: "light",
common: {
- black: odysseyTokens.ColorNeutralDark,
- white: odysseyTokens.ColorPaletteNeutralWhite,
+ black: odysseyTokens.HueNeutral900,
+ white: odysseyTokens.HueNeutralWhite,
},
primary: {
- lighter: odysseyTokens.ColorPaletteBlue000,
- light: odysseyTokens.ColorPaletteBlue300,
- main: odysseyTokens.ColorPaletteBlue500 ?? Tokens.ColorPaletteGreen500,
- dark: odysseyTokens.ColorPaletteBlue900,
- contrastText: odysseyTokens.ColorTextBodyInverse,
+ lighter: odysseyTokens.HueBlue50,
+ light: odysseyTokens.HueBlue300,
+ main: odysseyTokens.HueBlue500 ?? Tokens.HueBlue500,
+ dark: odysseyTokens.HueBlue900,
+ contrastText: odysseyTokens.TypographyColorBodyInverse,
},
secondary: {
light: "#80c7ca",
- main:
- odysseyTokens.ColorPaletteTurquoise500 ??
- Tokens.ColorPaletteTurquoise500,
+ main: "#096256",
dark: "#004650",
- contrastText: odysseyTokens.ColorTextBodyInverse,
+ contrastText: odysseyTokens.TypographyColorBodyInverse,
},
error: {
- lighter: odysseyTokens.ColorPaletteRed000,
- light: odysseyTokens.ColorPaletteRed300,
- main: odysseyTokens.ColorPaletteRed500 ?? Tokens.ColorPaletteRed500,
- dark: odysseyTokens.ColorPaletteRed900,
- contrastText: odysseyTokens.ColorTextBodyInverse,
+ lighter: odysseyTokens.HueRed50,
+ light: odysseyTokens.HueRed300,
+ main: odysseyTokens.HueRed500 ?? Tokens.HueRed500,
+ dark: odysseyTokens.HueRed900,
+ contrastText: odysseyTokens.TypographyColorBodyInverse,
},
warning: {
- lighter: odysseyTokens.ColorPaletteYellow000,
- light: odysseyTokens.ColorPaletteYellow300,
- main: odysseyTokens.ColorPaletteYellow500 ?? Tokens.ColorPaletteYellow500,
- dark: odysseyTokens.ColorPaletteYellow900,
- contrastText: odysseyTokens.ColorTextBody,
+ lighter: odysseyTokens.HueYellow50,
+ light: odysseyTokens.HueYellow300,
+ main: odysseyTokens.HueYellow500 ?? Tokens.HueYellow500,
+ dark: odysseyTokens.HueYellow900,
+ contrastText: odysseyTokens.TypographyColorBody,
},
info: {
- lighter: odysseyTokens.ColorPaletteBlue000,
- light: odysseyTokens.ColorPaletteBlue300,
- main: odysseyTokens.ColorPaletteBlue500 ?? Tokens.ColorPaletteBlue500,
- dark: odysseyTokens.ColorPaletteBlue900,
- contrastText: odysseyTokens.ColorTextBodyInverse,
+ lighter: odysseyTokens.HueBlue50,
+ light: odysseyTokens.HueBlue300,
+ main: odysseyTokens.HueBlue500 ?? Tokens.HueBlue500,
+ dark: odysseyTokens.HueBlue900,
+ contrastText: odysseyTokens.TypographyColorBodyInverse,
},
success: {
- lighter: odysseyTokens.ColorPaletteGreen000,
- light: odysseyTokens.ColorPaletteGreen300,
- main: odysseyTokens.ColorPaletteGreen500 ?? Tokens.ColorPaletteGreen500,
- dark: odysseyTokens.ColorPaletteGreen900,
- contrastText: odysseyTokens.ColorTextBodyInverse,
+ lighter: odysseyTokens.HueGreen50,
+ light: odysseyTokens.HueGreen300,
+ main: odysseyTokens.HueGreen500 ?? Tokens.HueGreen500,
+ dark: odysseyTokens.HueGreen900,
+ contrastText: odysseyTokens.TypographyColorBodyInverse,
},
grey: {
- 50: odysseyTokens.ColorPaletteNeutral000,
- 100: odysseyTokens.ColorPaletteNeutral100,
- 200: odysseyTokens.ColorPaletteNeutral200,
- 300: "#c1c1c8",
- 400: "#aaaab4",
- 500: odysseyTokens.ColorPaletteNeutral500,
- 600: odysseyTokens.ColorPaletteNeutral600,
- 700: "#585862",
- 800: "#41414b",
- 900: odysseyTokens.ColorPaletteNeutral900,
+ 50: odysseyTokens.HueNeutral50,
+ 100: odysseyTokens.HueNeutral100,
+ 200: odysseyTokens.HueNeutral200,
+ 300: odysseyTokens.HueNeutral300,
+ 400: odysseyTokens.HueNeutral400,
+ 500: odysseyTokens.HueNeutral500,
+ 600: odysseyTokens.HueNeutral600,
+ 700: odysseyTokens.HueNeutral700,
+ 800: odysseyTokens.HueNeutral800,
+ 900: odysseyTokens.HueNeutral900,
// These are "Accent" colors. MUI's palette matches them to the standard greys.
- A100: odysseyTokens.ColorPaletteNeutral100,
- A200: odysseyTokens.ColorPaletteNeutral200,
- A400: "#aaaab4",
- A700: "#585862",
+ A100: odysseyTokens.HueNeutral100,
+ A200: odysseyTokens.HueNeutral200,
+ A400: odysseyTokens.HueNeutral400,
+ A700: odysseyTokens.HueNeutral700,
},
text: {
- primary: odysseyTokens.ColorPaletteNeutral900,
- secondary: odysseyTokens.ColorPaletteNeutral600,
- disabled: odysseyTokens.ColorPaletteNeutral600,
+ primary: odysseyTokens.HueNeutral900,
+ secondary: odysseyTokens.HueNeutral600,
+ disabled: odysseyTokens.HueNeutral300,
},
- divider: odysseyTokens.ColorBorderDisplay,
+ divider: odysseyTokens.BorderColorDisplay,
background: {
- paper: odysseyTokens.ColorBackgroundBase,
- default: odysseyTokens.ColorBackgroundBase,
+ paper: odysseyTokens.HueNeutralWhite,
+ default: odysseyTokens.HueNeutralWhite,
},
action: {
// We have no equivalents here. It's likely we will update these as their uses are discovered.
@@ -100,7 +98,7 @@ export const palette = (
hoverOpacity: 0.04,
selected: "rgba(0, 0, 0, 0.08)",
selectedOpacity: 0.08,
- disabled: odysseyTokens.ColorPaletteNeutral200,
+ disabled: odysseyTokens.HueNeutral200,
disabledBackground: "rgba(0, 0, 0, 0.12)",
disabledOpacity: 0.38,
focus: "rgba(0, 0, 0, 0.12)",
diff --git a/packages/odyssey-react-mui/src/theme/shape.ts b/packages/odyssey-react-mui/src/theme/shape.ts
index 233f06eba4..4445d11583 100644
--- a/packages/odyssey-react-mui/src/theme/shape.ts
+++ b/packages/odyssey-react-mui/src/theme/shape.ts
@@ -18,9 +18,9 @@ export const shape = (
): ThemeOptions["shape"] => {
// Strip units from BorderRadiusBase to accommodate MUI's typing
const NumericalBorderRadiusBase =
- typeof odysseyTokens.BorderRadiusBase === "string"
- ? Number(odysseyTokens.BorderRadiusBase.replace(/(\d+).*/, "$1"))
- : odysseyTokens.BorderRadiusBase;
+ typeof odysseyTokens.BorderRadiusMain === "string"
+ ? Number(odysseyTokens.BorderRadiusMain.replace(/(\d+).*/, "$1"))
+ : odysseyTokens.BorderRadiusMain;
return {
borderRadius: NumericalBorderRadiusBase,
diff --git a/packages/odyssey-react-mui/src/theme/spacing.ts b/packages/odyssey-react-mui/src/theme/spacing.ts
index 5fbe7b67ad..775efd1ff8 100644
--- a/packages/odyssey-react-mui/src/theme/spacing.ts
+++ b/packages/odyssey-react-mui/src/theme/spacing.ts
@@ -18,15 +18,15 @@ export const spacing = (
odysseyTokens: DesignTokensOverride
): ThemeOptions["spacing"] => {
return [
- 0,
- odysseyTokens.SpaceScale0 ?? Tokens.SpaceScale0,
- odysseyTokens.SpaceScale1 ?? Tokens.SpaceScale1,
- odysseyTokens.SpaceScale2 ?? Tokens.SpaceScale2,
- odysseyTokens.SpaceScale3 ?? Tokens.SpaceScale3,
- odysseyTokens.SpaceScale4 ?? Tokens.SpaceScale4,
- odysseyTokens.SpaceScale5 ?? Tokens.SpaceScale5,
- odysseyTokens.SpaceScale6 ?? Tokens.SpaceScale6,
- odysseyTokens.SpaceScale7 ?? Tokens.SpaceScale7,
- odysseyTokens.SpaceScale8 ?? Tokens.SpaceScale8,
+ odysseyTokens.Spacing0 ?? Tokens.Spacing0,
+ odysseyTokens.Spacing1 ?? Tokens.Spacing1,
+ odysseyTokens.Spacing2 ?? Tokens.Spacing2,
+ odysseyTokens.Spacing3 ?? Tokens.Spacing3,
+ odysseyTokens.Spacing4 ?? Tokens.Spacing4,
+ odysseyTokens.Spacing5 ?? Tokens.Spacing5,
+ odysseyTokens.Spacing6 ?? Tokens.Spacing6,
+ odysseyTokens.Spacing7 ?? Tokens.Spacing7,
+ odysseyTokens.Spacing8 ?? Tokens.Spacing8,
+ odysseyTokens.Spacing9 ?? Tokens.Spacing9,
];
};
diff --git a/packages/odyssey-react-mui/src/theme/typography.ts b/packages/odyssey-react-mui/src/theme/typography.ts
index 42af200efc..0be411dda6 100644
--- a/packages/odyssey-react-mui/src/theme/typography.ts
+++ b/packages/odyssey-react-mui/src/theme/typography.ts
@@ -18,84 +18,91 @@ export const typography = (
): ThemeOptions["typography"] => {
return {
htmlFontSize: 16,
- fontFamily: odysseyTokens.FontFamilyBase,
+ fontFamily: odysseyTokens.TypographyFamilyBody,
fontSize: 14,
fontWeightLight: 300,
- fontWeightRegular: Number(odysseyTokens.FontWeightNormal),
- fontWeightMedium: 500,
- fontWeightBold: Number(odysseyTokens.FontWeightBold),
+ fontWeightRegular: Number(odysseyTokens.TypographyWeightBody),
+ fontWeightMedium: Number(odysseyTokens.TypographyWeightHeading),
+ fontWeightBold: Number(odysseyTokens.TypographyWeightHeadingBold),
allVariants: {
- fontFamily: odysseyTokens.FontFamilyBase,
+ fontFamily: odysseyTokens.TypographyFamilyBody,
fontFeatureSettings: "'lnum', 'pnum'",
fontVariant: "normal",
letterSpacing: 0,
},
h1: {
- fontWeight: Number(odysseyTokens.FontWeightBold),
- fontSize: odysseyTokens.FontSizeHeading1,
- lineHeight: odysseyTokens.FontLineHeightHeading1,
- marginBottom: odysseyTokens.SpaceScale1,
+ fontWeight: Number(odysseyTokens.TypographyWeightHeading),
+ fontSize: odysseyTokens.TypographySizeHeading1,
+ lineHeight: odysseyTokens.TypographyLineHeightHeading1,
+ marginBottom: odysseyTokens.Spacing2,
},
h2: {
- fontWeight: Number(odysseyTokens.FontWeightBold),
- fontSize: odysseyTokens.FontSizeHeading2,
- lineHeight: odysseyTokens.FontLineHeightHeading2,
- marginBottom: odysseyTokens.SpaceScale1,
+ fontWeight: Number(odysseyTokens.TypographyWeightHeading),
+ fontSize: odysseyTokens.TypographySizeHeading2,
+ lineHeight: odysseyTokens.TypographyLineHeightHeading2,
+ marginBottom: odysseyTokens.Spacing2,
},
h3: {
- fontWeight: Number(odysseyTokens.FontWeightBold),
- fontSize: odysseyTokens.FontSizeHeading3,
- lineHeight: odysseyTokens.FontLineHeightHeading3,
- marginBottom: odysseyTokens.SpaceScale1,
+ fontWeight: Number(odysseyTokens.TypographyWeightHeading),
+ fontSize: odysseyTokens.TypographySizeHeading3,
+ lineHeight: odysseyTokens.TypographyLineHeightHeading3,
+ marginBottom: odysseyTokens.Spacing2,
},
h4: {
- fontWeight: Number(odysseyTokens.FontWeightBold),
- fontSize: odysseyTokens.FontSizeHeading4,
- lineHeight: odysseyTokens.FontLineHeightHeading4,
- marginBottom: odysseyTokens.SpaceScale1,
+ fontWeight: Number(odysseyTokens.TypographyWeightHeading),
+ fontSize: odysseyTokens.TypographySizeHeading4,
+ lineHeight: odysseyTokens.TypographyLineHeightHeading4,
+ marginBottom: odysseyTokens.Spacing2,
},
h5: {
- fontWeight: Number(odysseyTokens.FontWeightBold),
- fontSize: odysseyTokens.FontSizeHeading5,
- lineHeight: odysseyTokens.FontLineHeightHeading5,
- marginBottom: odysseyTokens.SpaceScale1,
+ fontWeight: Number(odysseyTokens.TypographyWeightHeading),
+ fontSize: odysseyTokens.TypographySizeHeading5,
+ lineHeight: odysseyTokens.TypographyLineHeightHeading5,
+ marginBottom: odysseyTokens.Spacing2,
},
h6: {
- fontWeight: Number(odysseyTokens.FontWeightBold),
- fontSize: odysseyTokens.FontScale2,
- lineHeight: odysseyTokens.FontLineHeightHeading6,
- marginBottom: odysseyTokens.SpaceScale1,
+ fontWeight: Number(odysseyTokens.TypographyWeightHeading),
+ fontSize: odysseyTokens.TypographyScale2,
+ lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+ marginBottom: odysseyTokens.Spacing2,
},
subtitle1: {
- color: odysseyTokens.ColorPaletteNeutral600,
- fontWeight: odysseyTokens.FontWeightNormal,
- fontSize: odysseyTokens.FontScale0,
- lineHeight: odysseyTokens.FontLineHeightBody,
+ color: odysseyTokens.HueNeutral600,
+ fontWeight: Number(odysseyTokens.TypographyWeightBody),
+ fontSize: odysseyTokens.TypographyScale0,
+ lineHeight: odysseyTokens.TypographyLineHeightBody,
},
subtitle2: undefined,
body1: {
- fontFamily: odysseyTokens.FontFamilyBase,
- fontWeight: Number(odysseyTokens.FontWeightNormal),
- fontSize: odysseyTokens.FontScale1,
+ fontFamily: odysseyTokens.TypographyFamilyBody,
+ fontWeight: Number(odysseyTokens.TypographyWeightBody),
+ fontSize: odysseyTokens.TypographyScale1,
fontFeatureSettings: "'lnum', 'pnum'",
fontVariant: "normal",
- lineHeight: odysseyTokens.FontLineHeightBody,
+ lineHeight: odysseyTokens.TypographyLineHeightBody,
letterSpacing: "initial",
},
body2: undefined,
button: undefined,
- overline: undefined,
+ overline: {
+ fontWeight: Number(odysseyTokens.TypographyWeightHeadingBold),
+ fontFamily: odysseyTokens.TypographyFamilyBody,
+ lineHeight: odysseyTokens.TypographyLineHeightOverline,
+ letterSpacing: "5%",
+ textTransform: "uppercase",
+ fontSize: "0.71428571rem",
+ },
legend: {
padding: 0,
- fontWeight: Number(odysseyTokens.FontWeightBold),
- fontSize: odysseyTokens.FontScale2,
- lineHeight: odysseyTokens.FontLineHeightHeading6,
- marginBottom: odysseyTokens.SpaceScale1,
+ fontWeight: Number(odysseyTokens.TypographyWeightHeading),
+ fontSize: odysseyTokens.TypographyScale2,
+ lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+ marginBottom: odysseyTokens.Spacing2,
},
ui: {
- fontWeight: Number(odysseyTokens.FontWeightNormal),
- fontSize: odysseyTokens.FontScale1,
- lineHeight: odysseyTokens.FontLineHeightUi,
+ fontWeight: Number(odysseyTokens.TypographyWeightBody),
+ fontSize: odysseyTokens.TypographyScale1,
+ lineHeight: odysseyTokens.TypographyLineHeightUi,
letterSpacing: "initial",
},
};
diff --git a/packages/odyssey-react-mui/src/theme/typography.types.ts b/packages/odyssey-react-mui/src/theme/typography.types.ts
index 1a7fb4a975..1b6fb7e420 100644
--- a/packages/odyssey-react-mui/src/theme/typography.types.ts
+++ b/packages/odyssey-react-mui/src/theme/typography.types.ts
@@ -29,7 +29,7 @@ declare module "@mui/material/Typography" {
body2: false;
button: false;
legend: true;
- overline: false;
+ overline: true;
subtitle1: true; // Design may refer to this as "caption"
subtitle2: false;
ui: true;
diff --git a/packages/odyssey-storybook/.storybook/OdysseyTheme.js b/packages/odyssey-storybook/.storybook/OdysseyTheme.js
index a391613dd3..5324a36f64 100644
--- a/packages/odyssey-storybook/.storybook/OdysseyTheme.js
+++ b/packages/odyssey-storybook/.storybook/OdysseyTheme.js
@@ -1,47 +1,47 @@
import { create } from "@storybook/theming";
import {
- ColorPaletteNeutral000,
- ColorPaletteNeutral200,
- ColorPaletteNeutral500,
- ColorPaletteNeutral600,
- ColorPaletteNeutralWhite,
- ColorPrimaryBase,
- ColorPrimaryDark,
- ColorTextBody,
- ColorTextBodyInverse,
- FontFamilyBase,
- FontFamilyMono,
+ HueNeutral50,
+ HueNeutral200,
+ HueNeutral500,
+ HueNeutral600,
+ HueNeutralWhite,
+ PalettePrimaryMain,
+ PalettePrimaryDark,
+ TypographyColorBody,
+ TypographyColorBodyInverse,
+ TypographyFamilyBody,
+ TypographyFamilyMono,
} from "@okta/odyssey-design-tokens";
export default create({
base: "light",
- colorPrimary: ColorPrimaryBase,
- colorSecondary: ColorPrimaryDark,
+ PalettePrimary: PalettePrimaryMain,
+ colorSecondary: PalettePrimaryDark,
// UI
- appBg: ColorPaletteNeutral000,
- appContentBg: ColorPaletteNeutralWhite,
- appBorderColor: ColorPaletteNeutral200,
+ appBg: HueNeutral50,
+ appContentBg: HueNeutralWhite,
+ appBorderColor: HueNeutral200,
appBorderRadius: 4,
// Typography
- fontBase: FontFamilyBase,
- fontCode: FontFamilyMono,
+ fontBase: TypographyFamilyBody,
+ fontCode: TypographyFamilyMono,
// Text colors
- textColor: ColorTextBody,
- textInverseColor: ColorTextBodyInverse,
+ textColor: TypographyColorBody,
+ textInverseColor: TypographyColorBodyInverse,
// Toolbar default and active colors
- barTextColor: ColorPaletteNeutral600,
- barSelectedColor: ColorTextBody,
- barBg: ColorPaletteNeutralWhite,
+ barTextColor: HueNeutral600,
+ barSelectedColor: TypographyColorBody,
+ barBg: HueNeutralWhite,
// Form colors
- inputBg: ColorPaletteNeutralWhite,
- inputBorder: ColorPaletteNeutral500,
- inputTextColor: ColorTextBody,
+ inputBg: HueNeutralWhite,
+ inputBorder: HueNeutral500,
+ inputTextColor: TypographyColorBody,
inputBorderRadius: 4,
brandTitle: "Odyssey Design System",
diff --git a/packages/odyssey-storybook/.storybook/components/TokenTables.tsx b/packages/odyssey-storybook/.storybook/components/TokenTables.tsx
index 57336bb32e..55f2415b53 100644
--- a/packages/odyssey-storybook/.storybook/components/TokenTables.tsx
+++ b/packages/odyssey-storybook/.storybook/components/TokenTables.tsx
@@ -50,7 +50,11 @@ export const TokenTables = (): ReactNode => {
if (!parts) return;
let tokenType = parts[0];
- if (parts[0] === "Color") {
+ if (
+ parts[0] === "Color" ||
+ parts[0] === "Hue" ||
+ parts[0] === "Palette"
+ ) {
tokenType = `${parts[1]} ${parts[0]}s`;
}
@@ -214,7 +218,8 @@ export const TokenTables = (): ReactNode => {
{token.name.includes("Border") &&
!token.name.includes("ColorBorder") &&
renderBorder(token)}
- {token.name.includes("Color") &&
+ {(token.name.includes("Hue") ||
+ token.name.includes("Palette")) &&
!token.name.includes("ColorText") &&
renderColor(token.value)}
{token.name.includes("ColorText") &&
diff --git a/packages/odyssey-storybook/.storybook/preview-head.html b/packages/odyssey-storybook/.storybook/preview-head.html
index ad7e608309..c596505889 100644
--- a/packages/odyssey-storybook/.storybook/preview-head.html
+++ b/packages/odyssey-storybook/.storybook/preview-head.html
@@ -1,14 +1,9 @@
-
-
+
+
-
-
@@ -58,4 +53,13 @@
.sbdocs .sb-dont .innerZoomElementWrapper > div {
display: block;
}
+
+ .sbdocs .sbdocs-h1,
+ .sbdocs .sbdocs-h2,
+ .sbdocs .sbdocs-h3,
+ .sbdocs .sbdocs-h4,
+ .sbdocs .sbdocs-h5,
+ .sbdocs .sbdocs-h6 {
+ font-weight: 500;
+ }
diff --git a/packages/odyssey-storybook/src/contributing/CustomTheme.stories.tsx b/packages/odyssey-storybook/src/contributing/CustomTheme.stories.tsx
index dcbc28cc1e..e666c5cc1e 100644
--- a/packages/odyssey-storybook/src/contributing/CustomTheme.stories.tsx
+++ b/packages/odyssey-storybook/src/contributing/CustomTheme.stories.tsx
@@ -42,12 +42,11 @@ export default {
export const ButtonStory: StoryObj = {
render: function C() {
const odysseyDesignTokensOverrides: DesignTokensOverride = {
- BorderRadiusBase: "12px",
- ColorBackgroundBase: "cyan", //focus border color
- ColorPaletteBlue500: "green", //base background color
- ColorPaletteBlue900: "rgb(150,0,0,1)", //used for hover/focus
- FontLineHeightHeading1: 1.2,
- SpaceScale0: "1rem",
+ BorderRadiusMain: "12px",
+ HueBlue500: "green", //base background color
+ HueBlue900: "rgb(150,0,0,1)", //used for hover/focus
+ TypographyLineHeightHeading1: 1.2,
+ Spacing0: "1rem",
};
return (
@@ -65,7 +64,7 @@ ButtonStory.storyName = "Button";
export const TextFieldStory: StoryObj = {
render: function C() {
const odysseyDesignTokensOverrides: DesignTokensOverride = {
- ColorPaletteBlue500: "orange",
+ HueBlue500: "orange",
};
return (
@@ -88,7 +87,7 @@ TextFieldStory.storyName = "TextField";
export const RadioGroupStory: StoryObj = {
render: function C() {
const odysseyDesignTokensOverrides: DesignTokensOverride = {
- ColorPaletteBlue500: "rgba(0, 160, 100, 1)", // THIS IS A SAMPLE. DO NOT USE!
+ HueBlue500: "rgba(0, 160, 100, 1)", // THIS IS A SAMPLE. DO NOT USE!
};
return (