New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@okta/odyssey-design-tokens

Package Overview
Dependencies
Maintainers
1
Versions
150
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@okta/odyssey-design-tokens - npm Package Compare versions

Comparing version

0.22.0
to
0.23.0

23

dist/index.d.ts
/**
* Do not edit directly
* Generated on Fri, 21 Apr 2023 20:56:23 GMT
* Generated on Mon, 08 May 2023 19:07:54 GMT
*/

@@ -46,16 +46,15 @@

export const ColorPaletteNeutral100 : string; // Used for read-only/disabled states
export const ColorPaletteNeutral200 : string; // Used for Display borders
export const ColorPaletteNeutral500 : string; // Used for Interactive UI borders
export const ColorPaletteNeutral600 : string; // Used for caption text, Status label, disabled Overlay Buttons
export const ColorPaletteNeutral200 : string; // Used for display borders
export const ColorPaletteNeutral500 : string; // Used for interactive UI borders
export const ColorPaletteNeutral600 : string; // Used for caption text, status label, disabled overlay buttons
export const ColorPaletteNeutral900 : string; // Used for titles, body copy, icons, shadows, tooltips
export const ColorPaletteNeutralWhite : string; // Used for page backgrounds, text
export const ColorPaletteNeutral000 : string; // Used for Backgrounds, read-only & disabled input fills
export const ColorPaletteNeutral000 : string; // Used for backgrounds, read-only & disabled input fills
export const ColorPaletteBlue300 : string; // Used for buttons disabled state fills & borders, focus rings
export const ColorPaletteBlue400 : string; // Used for a11y-friendly UI backgrounds
export const ColorPaletteBlue500 : string; // Used for links, buttons, icons, hover states, selected states
export const ColorPaletteBlue900 : string; // Used for okta logo, brand moments, button hovers
export const ColorPaletteBlue000 : string; // Used for clear button hover, backgrounds
export const ColorPaletteGreen300 : string; // N/A
export const ColorPaletteGreen300 : string; // n/a
export const ColorPaletteGreen500 : string; // Used for moments of success, validation, wayfinding, status
export const ColorPaletteGreen600 : string; // Used for background color for success messaging
export const ColorPaletteGreen600 : string; // n/a
export const ColorPaletteGreen900 : string; // Used for moments of success, validation, wayfinding

@@ -67,10 +66,10 @@ export const ColorPaletteGreen000 : string; // Used for moments of success, validation, wayfinding

export const ColorPaletteRed000 : string; // Used for system errors, danger buttons, error states
export const ColorPaletteYellow300 : string; // N/A
export const ColorPaletteYellow500 : string; // Used for Moments of caution, status dot
export const ColorPaletteYellow300 : string; // n/a
export const ColorPaletteYellow500 : string; // Used for moments of caution, status dot
export const ColorPaletteYellow900 : string; // Used for moments of caution
export const ColorPaletteYellow000 : string; // Used for moments of caution
export const ColorPaletteOrange500 : string; // N/A
export const ColorPaletteOrange500 : string; // n/a
export const ColorPaletteTurquoise400 : string; // Used for background color
export const ColorPaletteTurquoise500 : string; // Used for brand moments
export const ColorPalettePurple500 : string; // Used for Moments of learning, tips, brand moments
export const ColorPalettePurple500 : string; // Used for moments of learning, tips, brand moments
export const ColorTextBody : string; // Base text color used for most typography

@@ -77,0 +76,0 @@ export const ColorTextHeading : string; // Base text color used for headings

143

dist/index.js
/**
* Do not edit directly
* Generated on Fri, 21 Apr 2023 20:56:23 GMT
* Generated on Mon, 08 May 2023 19:07:54 GMT
*/

@@ -11,73 +11,72 @@

export const ColorBackgroundBase = "#ffffff";
export const ColorBackgroundDisabled = "#f5f5f6";
export const ColorBackgroundPrimaryLight = "#f2f5ff";
export const ColorBackgroundPrimaryBase = "#a7b5ec";
export const ColorBackgroundPrimaryDark = "#00297a";
export const ColorBackgroundDangerLight = "#ffdfe2";
export const ColorBackgroundDangerBase = "#f88c90";
export const ColorBackgroundDangerDark = "#da372c";
export const ColorBackgroundCautionLight = "#faf5dc";
export const ColorBackgroundCautionBase = "#f9dc77";
export const ColorBackgroundCautionDark = "#ffc61c";
export const ColorBackgroundSuccessLight = "#e5faf3";
export const ColorBackgroundSuccessBase = "#84d2b1";
export const ColorBackgroundSuccessDark = "#008055";
export const ColorBorderUi = "#8c8c96";
export const ColorBorderDisplay = "#d7d7dc";
export const ColorBorderDisabled = "#d7d7dc";
export const ColorBorderDangerLight = "#f88c90";
export const ColorBorderDangerBase = "#da372c";
export const ColorBorderDangerDark = "#640019";
export const ColorBorderPrimaryBase = "#1662dd";
export const ColorBorderPrimaryDark = "#00297a";
export const ColorPrimaryLight = "#a7b5ec";
export const ColorPrimaryBase = "#1662dd";
export const ColorPrimaryDark = "#00297a";
export const ColorDangerLight = "#f88c90";
export const ColorDangerBase = "#da372c";
export const ColorDangerDark = "#640019";
export const ColorCautionLight = "#f9dc77";
export const ColorCautionBase = "#ffc61c";
export const ColorCautionDark = "#663800";
export const ColorSuccessLight = "#84d2b1";
export const ColorSuccessBase = "#00b478";
export const ColorNeutralBase = "#6e6e78";
export const ColorNeutralDark = "#1d1d21";
export const ColorPaletteNeutral100 = "#ebebed"; // Used for read-only/disabled states
export const ColorPaletteNeutral200 = "#d7d7dc"; // Used for Display borders
export const ColorPaletteNeutral500 = "#8c8c96"; // Used for Interactive UI borders
export const ColorPaletteNeutral600 = "#6e6e78"; // Used for caption text, Status label, disabled Overlay Buttons
export const ColorPaletteNeutral900 = "#1d1d21"; // Used for titles, body copy, icons, shadows, tooltips
export const ColorBackgroundDisabled = "#f4f4f4";
export const ColorBackgroundPrimaryLight = "#f2f3fd";
export const ColorBackgroundPrimaryBase = "#9daaf1";
export const ColorBackgroundPrimaryDark = "#22307c";
export const ColorBackgroundDangerLight = "#fff0ee";
export const ColorBackgroundDangerBase = "#febbae";
export const ColorBackgroundDangerDark = "#d92300";
export const ColorBackgroundCautionLight = "#fcf6ac";
export const ColorBackgroundCautionBase = "#f9c503";
export const ColorBackgroundCautionDark = "#986603";
export const ColorBackgroundSuccessLight = "#defae7";
export const ColorBackgroundSuccessBase = "#7be09e";
export const ColorBackgroundSuccessDark = "#0e562f";
export const ColorBorderUi = "#8d8d8d";
export const ColorBorderDisplay = "#e1e1e1";
export const ColorBorderDisabled = "#e1e1e1";
export const ColorBorderDangerLight = "#febbae";
export const ColorBorderDangerBase = "#d92300";
export const ColorBorderDangerDark = "#711200";
export const ColorBorderPrimaryBase = "#4c64e1";
export const ColorBorderPrimaryDark = "#22307c";
export const ColorPrimaryLight = "#9daaf1";
export const ColorPrimaryBase = "#4c64e1";
export const ColorPrimaryDark = "#22307c";
export const ColorDangerLight = "#febbae";
export const ColorDangerBase = "#d92300";
export const ColorDangerDark = "#711200";
export const ColorCautionLight = "#f9c503";
export const ColorCautionBase = "#986603";
export const ColorCautionDark = "#4c3302";
export const ColorSuccessLight = "#7be09e";
export const ColorSuccessBase = "#197f48";
export const ColorNeutralBase = "#6e6e6e";
export const ColorNeutralDark = "#272727";
export const ColorPaletteNeutral100 = "#ededed"; // Used for read-only/disabled states
export const ColorPaletteNeutral200 = "#e1e1e1"; // Used for display borders
export const ColorPaletteNeutral500 = "#8d8d8d"; // Used for interactive UI borders
export const ColorPaletteNeutral600 = "#6e6e6e"; // Used for caption text, status label, disabled overlay buttons
export const ColorPaletteNeutral900 = "#272727"; // Used for titles, body copy, icons, shadows, tooltips
export const ColorPaletteNeutralWhite = "#ffffff"; // Used for page backgrounds, text
export const ColorPaletteNeutral000 = "#f5f5f6"; // Used for Backgrounds, read-only & disabled input fills
export const ColorPaletteBlue300 = "#a7b5ec"; // Used for buttons disabled state fills & borders, focus rings
export const ColorPaletteBlue400 = "#788ee2"; // Used for a11y-friendly UI backgrounds
export const ColorPaletteBlue500 = "#1662dd"; // Used for links, buttons, icons, hover states, selected states
export const ColorPaletteBlue900 = "#00297a"; // Used for okta logo, brand moments, button hovers
export const ColorPaletteBlue000 = "#f2f5ff"; // Used for clear button hover, backgrounds
export const ColorPaletteGreen300 = "#84d2b1"; // N/A
export const ColorPaletteGreen500 = "#00b478"; // Used for moments of success, validation, wayfinding, status
export const ColorPaletteGreen600 = "#008055"; // Used for background color for success messaging
export const ColorPaletteGreen900 = "#00503c"; // Used for moments of success, validation, wayfinding
export const ColorPaletteGreen000 = "#e5faf3"; // Used for moments of success, validation, wayfinding
export const ColorPaletteRed300 = "#f88c90"; // Used for danger button disabled state fills, borders, & focus ring
export const ColorPaletteRed500 = "#da372c"; // Used for system errors, danger buttons, error states, status dot
export const ColorPaletteRed900 = "#640019"; // Used for destructive button & invalid input hovers
export const ColorPaletteRed000 = "#ffdfe2"; // Used for system errors, danger buttons, error states
export const ColorPaletteYellow300 = "#f9dc77"; // N/A
export const ColorPaletteYellow500 = "#ffc61c"; // Used for Moments of caution, status dot
export const ColorPaletteYellow900 = "#663800"; // Used for moments of caution
export const ColorPaletteYellow000 = "#faf5dc"; // Used for moments of caution
export const ColorPaletteOrange500 = "#e97107"; // N/A
export const ColorPaletteTurquoise400 = "#65adb7"; // Used for background color
export const ColorPaletteTurquoise500 = "#2d8c9e"; // Used for brand moments
export const ColorPalettePurple500 = "#8d6e97"; // Used for Moments of learning, tips, brand moments
export const ColorTextBody = "#1d1d21"; // Base text color used for most typography
export const ColorTextHeading = "#1d1d21"; // Base text color used for headings
export const ColorPaletteNeutral000 = "#f4f4f4"; // Used for backgrounds, read-only & disabled input fills
export const ColorPaletteBlue300 = "#9daaf1"; // Used for buttons disabled state fills & borders, focus rings
export const ColorPaletteBlue500 = "#4c64e1"; // Used for links, buttons, icons, hover states, selected states
export const ColorPaletteBlue900 = "#22307c"; // Used for okta logo, brand moments, button hovers
export const ColorPaletteBlue000 = "#f2f3fd"; // Used for clear button hover, backgrounds
export const ColorPaletteGreen300 = "#7be09e"; // n/a
export const ColorPaletteGreen500 = "#197f48"; // Used for moments of success, validation, wayfinding, status
export const ColorPaletteGreen600 = "#0e562f"; // n/a
export const ColorPaletteGreen900 = "#0a4023"; // Used for moments of success, validation, wayfinding
export const ColorPaletteGreen000 = "#defae7"; // Used for moments of success, validation, wayfinding
export const ColorPaletteRed300 = "#febbae"; // Used for danger button disabled state fills, borders, & focus ring
export const ColorPaletteRed500 = "#d92300"; // Used for system errors, danger buttons, error states, status dot
export const ColorPaletteRed900 = "#711200"; // Used for destructive button & invalid input hovers
export const ColorPaletteRed000 = "#fff0ee"; // Used for system errors, danger buttons, error states
export const ColorPaletteYellow300 = "#f9c503"; // n/a
export const ColorPaletteYellow500 = "#986603"; // Used for moments of caution, status dot
export const ColorPaletteYellow900 = "#4c3302"; // Used for moments of caution
export const ColorPaletteYellow000 = "#fcf6ac"; // Used for moments of caution
export const ColorPaletteOrange500 = "#ef9b05"; // n/a
export const ColorPaletteTurquoise400 = "#4cb7a3"; // Used for background color
export const ColorPaletteTurquoise500 = "#096256"; // Used for brand moments
export const ColorPalettePurple500 = "#4016a0"; // Used for moments of learning, tips, brand moments
export const ColorTextBody = "#272727"; // Base text color used for most typography
export const ColorTextHeading = "#272727"; // Base text color used for headings
export const ColorTextBodyInverse = "#ffffff"; // Inverse text color typically used on a colorful background
export const ColorTextPrimary = "#1662dd"; // Branded text color, primarily used within button
export const ColorTextSub = "#6e6e78"; // Text color for subordinate text like captions
export const ColorTextDanger = "#da372c";
export const FocusOutlineColorPrimary = "#1662dd";
export const FocusOutlineColorDanger = "#da372c";
export const ColorTextPrimary = "#4c64e1"; // Branded text color, primarily used within button
export const ColorTextSub = "#6e6e6e"; // Text color for subordinate text like captions
export const ColorTextDanger = "#d92300";
export const FocusOutlineColorPrimary = "#4c64e1";
export const FocusOutlineColorDanger = "#d92300";
export const FocusOutlineOffsetBase = "2px";

@@ -88,4 +87,4 @@ export const FocusOutlineOffsetTight = "0";

export const FocusOutlineWidthTight = "1px";
export const FontFamilyBase = "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif"; // Default font used within all Okta product user interfaces
export const FontFamilyMono = "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace"; // Monospace font used within all Okta product user interfaces
export const FontFamilyBase = "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif"; // Default font used within all Okta product user interfaces
export const FontFamilyMono = "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace"; // Monospace font used within all Okta product user interfaces
export const FontScale0 = "0.857rem";

@@ -92,0 +91,0 @@ export const FontScale1 = "1rem";

4

package.json
{
"name": "@okta/odyssey-design-tokens",
"version": "0.22.0",
"version": "0.23.0",
"description": "Design tokens for Odyssey, Okta's design system",

@@ -22,3 +22,3 @@ "author": "Okta, Inc.",

},
"gitHead": "b1a4a93f7d570162a52e4c28012fb65e31d5bb4b"
"gitHead": "46e7484fa0317496e65b9ba8b3f930956b0470e9"
}
dist/index.scss

Sorry, the diff of this file is not supported yet