diff --git a/src/framework/theme/type.ts b/src/framework/theme/type.ts index aeeac2541..2c0011c81 100644 --- a/src/framework/theme/type.ts +++ b/src/framework/theme/type.ts @@ -1,6 +1,7 @@ export enum Interaction { ACTIVE = 'active', FOCUSED = 'focused', + INDETERMINATE = 'indeterminate', } export enum State { diff --git a/src/framework/ui/avatar/avatar.spec.tsx.snap b/src/framework/ui/avatar/avatar.spec.tsx.snap index 601a4130a..536ebf3e7 100644 --- a/src/framework/ui/avatar/avatar.spec.tsx.snap +++ b/src/framework/ui/avatar/avatar.spec.tsx.snap @@ -27,6 +27,86 @@ exports[`@avatar: matches snapshot * appearance * default 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -35,6 +115,11 @@ exports[`@avatar: matches snapshot * appearance * default 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap index ba95e2f57..54a223ad5 100644 --- a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap +++ b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap @@ -26,6 +26,86 @@ exports[`@bottom-navigation: component checks * additional appearance 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -34,6 +114,11 @@ exports[`@bottom-navigation: component checks * additional appearance 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -100,6 +185,86 @@ exports[`@bottom-navigation: component checks * empty 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -108,6 +273,11 @@ exports[`@bottom-navigation: component checks * empty 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -159,6 +329,86 @@ exports[`@bottom-navigation: component checks * with routes 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -167,6 +417,11 @@ exports[`@bottom-navigation: component checks * with routes 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -243,6 +498,86 @@ exports[`@bottom-navigation-tab: component checks * empty 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -251,6 +586,11 @@ exports[`@bottom-navigation-tab: component checks * empty 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -281,6 +621,86 @@ exports[`@bottom-navigation-tab: component checks * text/selected 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -289,6 +709,11 @@ exports[`@bottom-navigation-tab: component checks * text/selected 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -331,6 +756,86 @@ exports[`@bottom-navigation-tab: component checks * text/unselected 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -339,6 +844,11 @@ exports[`@bottom-navigation-tab: component checks * text/unselected 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -381,6 +891,86 @@ exports[`@bottom-navigation-tab: component checks * with icon 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -389,6 +979,11 @@ exports[`@bottom-navigation-tab: component checks * with icon 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/button/button.spec.tsx.snap b/src/framework/ui/button/button.spec.tsx.snap index 03fd8114f..2d86b2e58 100644 --- a/src/framework/ui/button/button.spec.tsx.snap +++ b/src/framework/ui/button/button.spec.tsx.snap @@ -28,6 +28,86 @@ exports[`@button: matches snapshot * appearance * empty 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -36,6 +116,11 @@ exports[`@button: matches snapshot * appearance * empty 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -73,6 +158,86 @@ exports[`@button: matches snapshot * appearance * icon 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -81,6 +246,11 @@ exports[`@button: matches snapshot * appearance * icon 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -134,6 +304,86 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -142,6 +392,11 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -209,6 +464,86 @@ exports[`@button: matches snapshot * appearance * text 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -217,6 +552,11 @@ exports[`@button: matches snapshot * appearance * text 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -269,6 +609,86 @@ exports[`@button: matches snapshot * interaction * stateless 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -277,6 +697,11 @@ exports[`@button: matches snapshot * interaction * stateless 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx index 04b345365..673eed985 100644 --- a/src/framework/ui/checkbox/checkbox.component.tsx +++ b/src/framework/ui/checkbox/checkbox.component.tsx @@ -1,34 +1,36 @@ import React from 'react'; import { - View, - TouchableOpacity, StyleSheet, + TouchableOpacity, TouchableOpacityProps, + View, GestureResponderEvent, StyleProp, TextStyle, + ViewProps, } from 'react-native'; import { - StyledComponentProps, - StyleType, Interaction, styled, + StyledComponentProps, + StyleType, allWithRest, } from '@kitten/theme'; import { - Text as TextComponent, Props as TextProps, + Text as TextComponent, } from '../text/text.component'; -import { CheckMark } from '../drawable/checkmark/checkmark.component'; +import { CheckMark } from '../drawable'; import { TextStyleProps } from '../common/props'; interface CheckBoxProps { style?: StyleProp; text?: string; checked?: boolean; + indeterminate?: boolean; status?: string; size?: string; - onChange?: (checked: boolean) => void; + onChange?: (checked: boolean, indeterminate: boolean) => void; } const Text = styled(TextComponent); @@ -38,8 +40,10 @@ export type Props = CheckBoxProps & StyledComponentProps & TouchableOpacityProps export class CheckBox extends React.Component { private onPress = () => { + this.props.dispatch([]); + if (this.props.onChange) { - this.props.onChange(!this.props.checked); + this.props.onChange(!this.props.checked, false); } }; @@ -64,13 +68,15 @@ export class CheckBox extends React.Component { const { rest: derivedContainerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps); const { + textMarginHorizontal, textColor, textFontSize, textFontWeight, - textMarginLeft, - selectWidth, - selectHeight, - selectBackgroundColor, + textLineHeight, + iconWidth, + iconHeight, + iconBorderRadius, + iconTintColor, highlightWidth, highlightHeight, highlightBorderRadius, @@ -89,18 +95,19 @@ export class CheckBox extends React.Component { ...styles.selectContainer, }, text: { + marginHorizontal: textMarginHorizontal, color: textColor, fontSize: textFontSize, fontWeight: textFontWeight, - marginLeft: textMarginLeft, - ...derivedTextStyle, + lineHeight: textLineHeight, ...styles.text, + ...derivedTextStyle, }, - select: { - width: selectWidth, - height: selectHeight, - backgroundColor: selectBackgroundColor, - ...styles.select, + icon: { + width: iconWidth, + height: iconHeight, + borderRadius: iconBorderRadius, + backgroundColor: iconTintColor, }, highlight: { width: highlightWidth, @@ -116,38 +123,67 @@ export class CheckBox extends React.Component { const { text } = this.props; return ( - {text} + {text} ); }; - private renderComponentChildren = (style: StyleType): React.ReactNode => { + private renderSelectIconElement = (style: StyleType): React.ReactElement => { + return ( + + ); + }; + + private renderIndeterminateIconElement = (style: StyleType): React.ReactElement => { + return ( + + ); + }; + + private renderIconElement = (style: StyleType): React.ReactElement => { + if (this.props.indeterminate) { + return this.renderIndeterminateIconElement(style); + } else { + return this.renderSelectIconElement(style); + } + }; + + private renderComponentChildren = (style: StyleType): React.ReactElement[] => { const { text } = this.props; return [ - text ? this.renderTextElement(style) : undefined, + this.renderIconElement(style.icon), + text ? this.renderTextElement(style.text) : null, ]; }; public render(): React.ReactElement { - const { themedStyle, ...derivedProps } = this.props; - const componentStyle: StyleType = this.getComponentStyle(themedStyle); - const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyle.text); + const { style, themedStyle, text, ...derivedProps } = this.props; + + const { + container, + highlightContainer, + highlight, + selectContainer, + ...componentStyle + }: StyleType = this.getComponentStyle(themedStyle); + + const [iconElement, textElement] = this.renderComponentChildren(componentStyle); return ( - - - + + + - + {iconElement} - {componentChildren} + {textElement} ); } @@ -166,7 +202,10 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, - select: {}, + selectIcon: {}, + indeterminateIcon: { + borderRadius: 6, + }, highlight: { position: 'absolute', }, diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx b/src/framework/ui/checkbox/checkbox.spec.tsx index b92e540d9..f93b4c005 100644 --- a/src/framework/ui/checkbox/checkbox.spec.tsx +++ b/src/framework/ui/checkbox/checkbox.spec.tsx @@ -4,7 +4,10 @@ import { render, fireEvent, RenderAPI, + shallow, + waitForElement, } from 'react-native-testing-library'; +import { ReactTestInstance } from 'react-test-renderer'; import { styled, ApplicationProvider, @@ -14,6 +17,7 @@ import { CheckBox as CheckBoxComponent, Props as CheckBoxProps, } from './checkbox.component'; +import { Text as TextComponent } from '../text/text.component'; import { default as mapping } from '../common/mapping.json'; import { default as theme } from '../common/theme.json'; @@ -35,6 +39,59 @@ const renderComponent = (props?: CheckBoxProps): RenderAPI => { ); }; +describe('@checkbox matches snapshots', () => { + + it('* default', () => { + const component: RenderAPI = renderComponent(); + const { output } = shallow(component.getByType(CheckBoxComponent)); + + expect(output).toMatchSnapshot(); + }); + + it('* checked.disabled', () => { + const component: RenderAPI = renderComponent({ + checked: true, + disabled: true, + }); + const { output } = shallow(component.getByType(CheckBoxComponent)); + + expect(output).toMatchSnapshot(); + }); + + it('* active', async () => { + const component: RenderAPI = renderComponent(); + + fireEvent(component.getByType(TouchableOpacity), 'pressIn'); + + const active: ReactTestInstance = await waitForElement(() => { + return component.getByType(CheckBoxComponent); + }); + const { output: activeOutput } = shallow(active); + + fireEvent(component.getByType(TouchableOpacity), 'pressOut'); + + const inactive: ReactTestInstance = await waitForElement(() => { + return component.getByType(CheckBoxComponent); + }); + const { output: inactiveOutput } = shallow(inactive); + + expect(activeOutput).toMatchSnapshot(); + expect(inactiveOutput).toMatchSnapshot('default'); + }); + + it('* with text', () => { + const text: string = 'Text'; + const component: RenderAPI = renderComponent({ + checked: true, + text: text, + }); + const { output } = shallow(component.getByType(CheckBoxComponent)); + expect(component.getByType(TextComponent).props.children).toBe(text); + expect(output).toMatchSnapshot(); + }); + +}); + describe('@checkbox: component checks', () => { it('* emits onChange with correct args', () => { @@ -47,7 +104,22 @@ describe('@checkbox: component checks', () => { fireEvent.press(component.getByType(TouchableOpacity)); - expect(onChange).toBeCalledWith(false); + expect(onChange).toBeCalledWith(false, false); + }); + + it('* touchable other props', () => { + const onPressIn = jest.fn(); + const onPressOut = jest.fn(); + const component: RenderAPI = renderComponent({ + onPressIn: onPressIn, + onPressOut: onPressOut, + }); + + fireEvent(component.getByType(TouchableOpacity), 'pressIn'); + fireEvent(component.getByType(TouchableOpacity), 'pressOut'); + + expect(onPressIn).toHaveBeenCalled(); + expect(onPressOut).toHaveBeenCalled(); }); }); diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx.snap b/src/framework/ui/checkbox/checkbox.spec.tsx.snap new file mode 100644 index 000000000..d980cc4ed --- /dev/null +++ b/src/framework/ui/checkbox/checkbox.spec.tsx.snap @@ -0,0 +1,872 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@checkbox matches snapshots * active 1`] = ` + + + + + + + + +`; + +exports[`@checkbox matches snapshots * active: default 1`] = ` + + + + + + + + +`; + +exports[`@checkbox matches snapshots * checked.disabled 1`] = ` + + + + + + + + +`; + +exports[`@checkbox matches snapshots * default 1`] = ` + + + + + + + + +`; + +exports[`@checkbox matches snapshots * with text 1`] = ` + + + + + + + + + Text + + +`; diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json index 96284b265..46da75d13 100644 --- a/src/framework/ui/common/mapping.json +++ b/src/framework/ui/common/mapping.json @@ -566,6 +566,9 @@ "backgroundColor": { "type": "string" }, + "textMarginHorizontal": { + "type": "number" + }, "textColor": { "type": "string" }, @@ -575,16 +578,19 @@ "textFontWeight": { "type": "string" }, - "textMarginLeft": { + "textLineHeight": { "type": "number" }, - "selectWidth": { + "iconWidth": { "type": "number" }, - "selectHeight": { + "iconHeight": { "type": "number" }, - "selectBackgroundColor": { + "iconBorderRadius": { + "type": "number" + }, + "iconTintColor": { "type": "string" }, "highlightWidth": { @@ -607,18 +613,22 @@ }, "variantGroups": { "status": { - "error": { + "primary": { + "default": true + }, + "success": { "default": false - } - }, - "size": { - "small": { + }, + "warning": { "default": false }, - "medium": { - "default": true + "danger": { + "default": false }, - "large": { + "info": { + "default": false + }, + "white": { "default": false } } @@ -638,94 +648,184 @@ "default": false, "priority": 2, "scope": "all" + }, + "indeterminate": { + "default": false, + "priority": 3, + "scope": "all" } } }, "appearances": { "default": { "mapping": { - "borderWidth": 2, - "borderRadius": 4, - "borderColor": "gray-primary", - "backgroundColor": "gray-light", - "textColor": "text-primary", - "textFontWeight": "500", - "selectBackgroundColor": "transparent", - "highlightBorderRadius": 8, + "width": 24, + "height": 24, + "borderWidth": 1, + "borderRadius": 3, + "textMarginHorizontal": 12, + "textFontWeight": "font-primary-regular-text-weight", + "textLineHeight": "font-primary-regular-text-line-height", + "textColor": "font-primary-color", + "iconWidth": 12, + "iconHeight": 12, + "iconTintColor": "opacity-transparent", + "textFontSize": "font-primary-regular-text-size", + "highlightWidth": 40, + "highlightHeight": 40, + "highlightBorderRadius": 6, "highlightBackgroundColor": "transparent", "state": { "active": { - "borderColor": "gray-dark", "highlightBackgroundColor": "gray-light" }, "checked": { - "borderColor": "transparent", - "backgroundColor": "blue-primary", - "selectBackgroundColor": "#FFFFFF" + "iconTintColor": "color-white" }, - "disabled": { - "borderColor": "gray-light", - "backgroundColor": "#F1F5F5", - "textColor": "gray-300" + "indeterminate": { + "iconHeight": 4, + "iconBorderRadius": 6, + "iconTintColor": "color-white" }, - "checked.active": { - "borderColor": "blue-dark" + "disabled": { + "borderColor": "color-basic-600", + "backgroundColor": "color-basic-400", + "textColor": "font-primary-disabled-color" }, "checked.disabled": { - "borderColor": "transparent", - "backgroundColor": "gray-primary" + "borderColor": "color-basic-400", + "backgroundColor": "color-basic-400" } } }, "variantGroups": { "status": { - "error": { - "borderColor": "pink-primary", - "backgroundColor": "#FFC9D9", + "primary": { + "borderColor": "color-primary-500", + "backgroundColor": "color-primary-200", "state": { "active": { - "borderColor": "pink-primary" + "borderColor": "color-primary-600", + "backgroundColor": "color-primary-600" }, "checked": { - "borderColor": "pink-primary", - "backgroundColor": "pink-primary" + "borderColor": "color-primary-500", + "backgroundColor": "color-primary-500" + }, + "indeterminate": { + "borderColor": "color-primary-500", + "backgroundColor": "color-primary-500" }, "checked.active": { - "borderColor": "pink-primary" + "borderColor": "color-primary-600" } } - } - }, - "size": { - "small": { - "width": 24, - "height": 24, - "textMarginLeft": 10, - "textFontSize": 14, - "selectWidth": 12, - "selectHeight": 12, - "highlightWidth": 40, - "highlightHeight": 40 }, - "medium": { - "width": 30, - "height": 30, - "textMarginLeft": 12, - "textFontSize": 16, - "selectWidth": 14, - "selectHeight": 14, - "highlightWidth": 50, - "highlightHeight": 50 + "success": { + "borderColor": "color-success-500", + "backgroundColor": "color-success-200", + "state": { + "active": { + "borderColor": "color-success-600", + "backgroundColor": "color-success-600" + }, + "checked": { + "borderColor": "color-success-500", + "backgroundColor": "color-success-500" + }, + "indeterminate": { + "borderColor": "color-success-500", + "backgroundColor": "color-success-500" + }, + "checked.active": { + "borderColor": "color-success-600" + } + } }, - "large": { - "width": 36, - "height": 36, - "textMarginLeft": 14, - "textFontSize": 18, - "selectWidth": 16, - "selectHeight": 16, - "highlightWidth": 60, - "highlightHeight": 60 + "warning": { + "borderColor": "color-warning-500", + "backgroundColor": "color-warning-200", + "state": { + "active": { + "borderColor": "color-warning-600", + "backgroundColor": "color-warning-600" + }, + "checked": { + "borderColor": "color-warning-500", + "backgroundColor": "color-warning-500" + }, + "indeterminate": { + "borderColor": "color-warning-500", + "backgroundColor": "color-warning-500" + }, + "checked.active": { + "borderColor": "color-warning-600" + } + } + }, + "danger": { + "borderColor": "color-danger-500", + "backgroundColor": "color-danger-200", + "state": { + "active": { + "borderColor": "color-danger-600", + "backgroundColor": "color-danger-600" + }, + "checked": { + "borderColor": "color-danger-500", + "backgroundColor": "color-danger-500" + }, + "indeterminate": { + "borderColor": "color-danger-500", + "backgroundColor": "color-danger-500" + }, + "checked.active": { + "borderColor": "color-danger-600" + } + } + }, + "info": { + "borderColor": "color-info-500", + "backgroundColor": "color-info-200", + "state": { + "active": { + "borderColor": "color-info-600", + "backgroundColor": "color-info-600" + }, + "checked": { + "borderColor": "color-info-500", + "backgroundColor": "color-info-500" + }, + "indeterminate": { + "borderColor": "color-info-500", + "backgroundColor": "color-info-500" + }, + "checked.active": { + "borderColor": "color-info-600" + } + } + }, + "white": { + "borderColor": "color-white", + "backgroundColor": "color-white", + "iconTintColor": "opacity-transparent", + "state": { + "active": { + "borderColor": "color-white", + "backgroundColor": "color-white" + }, + "checked": { + "backgroundColor": "color-white", + "borderColor": "color-white", + "iconTintColor": "color-primary-500" + }, + "indeterminate": { + "iconTintColor": "color-primary-500" + }, + "checked.active": { + "borderColor": "color-white" + } + } } } } diff --git a/src/framework/ui/common/theme.json b/src/framework/ui/common/theme.json index e1fb57e03..a3970970d 100644 --- a/src/framework/ui/common/theme.json +++ b/src/framework/ui/common/theme.json @@ -13,5 +13,91 @@ "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", - "gray-400": "#a6aebd" + "gray-400": "#a6aebd", + + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-white": "#FFFFFF", + "color-black": "#0D1C2E", + "opacity-transparent": "transparent", + "outline-width": 11, + "outline-color": "#DDE1EB", + "outline-disabled-width": 0, + "outline-disabled-color": "transparent", + "font-primary-family": "", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", + "font-primary-regular-text-line-height": 16 } diff --git a/src/framework/ui/drawable/index.ts b/src/framework/ui/drawable/index.ts new file mode 100644 index 000000000..3a689887c --- /dev/null +++ b/src/framework/ui/drawable/index.ts @@ -0,0 +1,8 @@ +export { + Arrow, + Props as ArrowProps, +} from './arrow/arrow.component'; +export { + CheckMark, + Props as CheckMarkProps, +} from './checkmark/checkmark.component'; diff --git a/src/framework/ui/input/input.spec.tsx.snap b/src/framework/ui/input/input.spec.tsx.snap index acacb29f3..493e0d99a 100644 --- a/src/framework/ui/input/input.spec.tsx.snap +++ b/src/framework/ui/input/input.spec.tsx.snap @@ -36,6 +36,86 @@ exports[`@input: matches snapshot * appearance * icon 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -44,6 +124,11 @@ exports[`@input: matches snapshot * appearance * icon 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -104,6 +189,86 @@ exports[`@input: matches snapshot * interaction * stateless 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -112,6 +277,11 @@ exports[`@input: matches snapshot * interaction * stateless 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/layout/layout.spec.tsx.snap b/src/framework/ui/layout/layout.spec.tsx.snap index 928655a9e..af0c3fd46 100644 --- a/src/framework/ui/layout/layout.spec.tsx.snap +++ b/src/framework/ui/layout/layout.spec.tsx.snap @@ -22,6 +22,86 @@ exports[`@layout: matches snapshot default 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -30,6 +110,11 @@ exports[`@layout: matches snapshot default 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -62,6 +147,86 @@ exports[`@layout: matches snapshot with styles 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -70,6 +235,11 @@ exports[`@layout: matches snapshot with styles 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/list/list.spec.tsx.snap b/src/framework/ui/list/list.spec.tsx.snap index 638d2cc8a..63c2efb65 100644 --- a/src/framework/ui/list/list.spec.tsx.snap +++ b/src/framework/ui/list/list.spec.tsx.snap @@ -33,6 +33,86 @@ exports[`@list-item: template matches snapshot * description 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -41,6 +121,11 @@ exports[`@list-item: template matches snapshot * description 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -136,6 +221,86 @@ exports[`@list-item: template matches snapshot * title 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -144,6 +309,11 @@ exports[`@list-item: template matches snapshot * title 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -241,6 +411,86 @@ exports[`@list-item: template matches snapshot * with accessory 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -249,6 +499,11 @@ exports[`@list-item: template matches snapshot * with accessory 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -383,6 +638,86 @@ exports[`@list-item: template matches snapshot * with icon 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -391,6 +726,11 @@ exports[`@list-item: template matches snapshot * with icon 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap index 7bb9227f1..a87de0893 100644 --- a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap +++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap @@ -84,6 +84,86 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -92,6 +172,11 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -147,6 +232,86 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -155,6 +320,11 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -199,6 +369,86 @@ exports[`@overflow-menu-item: component checks * menu item active checks 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -207,6 +457,11 @@ exports[`@overflow-menu-item: component checks * menu item active checks 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -261,6 +516,86 @@ exports[`@overflow-menu-item: component checks * menu item active checks 2`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -269,6 +604,11 @@ exports[`@overflow-menu-item: component checks * menu item active checks 2`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -325,6 +665,86 @@ exports[`@overflow-menu-item: component checks * menu item with "set-1" props 1` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -333,6 +753,11 @@ exports[`@overflow-menu-item: component checks * menu item with "set-1" props 1` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -403,6 +828,86 @@ exports[`@overflow-menu-item: component checks * menu item with "set-2" props 1` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -411,6 +916,11 @@ exports[`@overflow-menu-item: component checks * menu item with "set-2" props 1` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/radio/radio.spec.tsx.snap b/src/framework/ui/radio/radio.spec.tsx.snap index 90af1a5f7..5f1eea4c0 100644 --- a/src/framework/ui/radio/radio.spec.tsx.snap +++ b/src/framework/ui/radio/radio.spec.tsx.snap @@ -63,6 +63,86 @@ exports[`@radio: matches snapshot active 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -71,6 +151,11 @@ exports[`@radio: matches snapshot active 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -159,6 +244,86 @@ exports[`@radio: matches snapshot active checked 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -167,6 +332,11 @@ exports[`@radio: matches snapshot active checked 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -255,6 +425,86 @@ exports[`@radio: matches snapshot active checked: checked 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -263,6 +513,11 @@ exports[`@radio: matches snapshot active checked: checked 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -350,6 +605,86 @@ exports[`@radio: matches snapshot active: default 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -358,6 +693,11 @@ exports[`@radio: matches snapshot active: default 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -446,6 +786,86 @@ exports[`@radio: matches snapshot checked 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -454,6 +874,11 @@ exports[`@radio: matches snapshot checked 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -543,6 +968,86 @@ exports[`@radio: matches snapshot checked disabled 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -551,6 +1056,11 @@ exports[`@radio: matches snapshot checked disabled 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -638,6 +1148,86 @@ exports[`@radio: matches snapshot default 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -646,6 +1236,11 @@ exports[`@radio: matches snapshot default 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -734,6 +1329,86 @@ exports[`@radio: matches snapshot disabled 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -742,6 +1417,11 @@ exports[`@radio: matches snapshot disabled 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/tab/tab.spec.tsx.snap b/src/framework/ui/tab/tab.spec.tsx.snap index 9d48ac0bf..5df929a79 100644 --- a/src/framework/ui/tab/tab.spec.tsx.snap +++ b/src/framework/ui/tab/tab.spec.tsx.snap @@ -23,6 +23,86 @@ exports[`@tab: component checks * empty 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -31,6 +111,11 @@ exports[`@tab: component checks * empty 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -63,6 +148,86 @@ exports[`@tab: component checks * icon 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -71,6 +236,11 @@ exports[`@tab: component checks * icon 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -117,6 +287,86 @@ exports[`@tab: component checks * title 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -125,6 +375,11 @@ exports[`@tab: component checks * title 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/toggle/toggle.spec.tsx.snap b/src/framework/ui/toggle/toggle.spec.tsx.snap index e12a1fed6..8cebf29b9 100644 --- a/src/framework/ui/toggle/toggle.spec.tsx.snap +++ b/src/framework/ui/toggle/toggle.spec.tsx.snap @@ -21,6 +21,86 @@ exports[`@toggle: matches snapshot active 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -29,6 +109,11 @@ exports[`@toggle: matches snapshot active 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -207,6 +292,86 @@ exports[`@toggle: matches snapshot active checked 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -215,6 +380,11 @@ exports[`@toggle: matches snapshot active checked 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -393,6 +563,86 @@ exports[`@toggle: matches snapshot active checked: checked 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -401,6 +651,11 @@ exports[`@toggle: matches snapshot active checked: checked 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -579,6 +834,86 @@ exports[`@toggle: matches snapshot active: default 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -587,6 +922,11 @@ exports[`@toggle: matches snapshot active: default 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -765,6 +1105,86 @@ exports[`@toggle: matches snapshot checked 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -773,6 +1193,11 @@ exports[`@toggle: matches snapshot checked 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -951,6 +1376,86 @@ exports[`@toggle: matches snapshot checked disabled 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -959,6 +1464,11 @@ exports[`@toggle: matches snapshot checked disabled 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -1137,6 +1647,86 @@ exports[`@toggle: matches snapshot default 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -1145,6 +1735,11 @@ exports[`@toggle: matches snapshot default 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -1323,6 +1918,86 @@ exports[`@toggle: matches snapshot disabled 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -1331,6 +2006,11 @@ exports[`@toggle: matches snapshot disabled 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/framework/ui/topNavigationBar/topNavigationBar.spec.tsx.snap b/src/framework/ui/topNavigationBar/topNavigationBar.spec.tsx.snap index 2be90de39..eeabf1dc3 100644 --- a/src/framework/ui/topNavigationBar/topNavigationBar.spec.tsx.snap +++ b/src/framework/ui/topNavigationBar/topNavigationBar.spec.tsx.snap @@ -20,6 +20,86 @@ exports[`@top-navigation-bar/action * action/is last item check (false) 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -28,6 +108,11 @@ exports[`@top-navigation-bar/action * action/is last item check (false) 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -80,6 +165,86 @@ exports[`@top-navigation-bar/action * action/is last item check (true) 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -88,6 +253,11 @@ exports[`@top-navigation-bar/action * action/is last item check (true) 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -153,6 +323,86 @@ exports[`@top-navigation-bar/action * action/on press check 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -161,6 +411,11 @@ exports[`@top-navigation-bar/action * action/on press check 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -213,6 +468,86 @@ exports[`@top-navigation-bar/action * action/with icon uri 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -221,6 +556,11 @@ exports[`@top-navigation-bar/action * action/with icon uri 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -281,6 +621,86 @@ exports[`@top-navigation-bar/action * bar/appearance: title-centered 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -289,6 +709,11 @@ exports[`@top-navigation-bar/action * bar/appearance: title-centered 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -372,6 +797,86 @@ exports[`@top-navigation-bar/action * bar/subtitle 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -380,6 +885,11 @@ exports[`@top-navigation-bar/action * bar/subtitle 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -470,6 +980,86 @@ exports[`@top-navigation-bar/action * bar/title 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -478,6 +1068,11 @@ exports[`@top-navigation-bar/action * bar/title 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", @@ -557,6 +1152,86 @@ exports[`@top-navigation-bar/action * bar/with actions 1`] = ` "blue-dark": "#2541CC", "blue-pitch-dark": "#0D1C2E", "blue-primary": "#3366FF", + "color-basic-100": "#F7F8FA", + "color-basic-200": "#EDF0F5", + "color-basic-300": "#DDE1EB", + "color-basic-400": "#C8CEDB", + "color-basic-500": "#A6AEBD", + "color-basic-600": "#8992A3", + "color-basic-700": "#6A7385", + "color-basic-800": "#4B5466", + "color-basic-900": "#2C3547", + "color-black": "#0D1C2E", + "color-danger-100": "#FFF2F2", + "color-danger-200": "#FFD6D9", + "color-danger-300": "#FFA8B4", + "color-danger-400": "#FF708D", + "color-danger-500": "#FF3D71", + "color-danger-600": "#DB2C66", + "color-danger-700": "#B81D5B", + "color-danger-800": "#94124E", + "color-danger-900": "#700940", + "color-info-100": "#F2F8FF", + "color-info-200": "#C7E2FF", + "color-info-300": "#94CBFF", + "color-info-400": "#42AAFF", + "color-info-500": "#0095FF", + "color-info-600": "#006FD6", + "color-info-700": "#0057C2", + "color-info-800": "#0041A8", + "color-info-900": "#002885", + "color-primary-100": "#F2F6FF", + "color-primary-200": "#D9E4FF", + "color-primary-300": "#A6C1FF", + "color-primary-400": "#598BFF", + "color-primary-500": "#3366FF", + "color-primary-600": "#284DE0", + "color-primary-700": "#2541CC", + "color-primary-800": "#192F9E", + "color-primary-900": "#14236E", + "color-secondary-100": "#F7F2FF", + "color-secondary-200": "#E0D1FF", + "color-secondary-300": "#C5A8FF", + "color-secondary-400": "#A375FF", + "color-secondary-500": "#884DFF", + "color-secondary-600": "#6A39DB", + "color-secondary-700": "#4F28B8", + "color-secondary-800": "#371B94", + "color-secondary-900": "#26117A", + "color-success-100": "#EDFFF3", + "color-success-200": "#B3FFD6", + "color-success-300": "#8CFAC7", + "color-success-400": "#51F0B0", + "color-success-500": "#00E096", + "color-success-600": "#00B383", + "color-success-700": "#008F72", + "color-success-800": "#007566", + "color-success-900": "#00524C", + "color-tertiary-100": "#FFDED6", + "color-tertiary-200": "#FFDED6", + "color-tertiary-300": "#FFDED6", + "color-tertiary-400": "#FFDED6", + "color-tertiary-500": "#FFDED6", + "color-tertiary-600": "#FFDED6", + "color-tertiary-700": "#FFDED6", + "color-tertiary-800": "#FFDED6", + "color-tertiary-900": "#FFDED6", + "color-warning-100": "#FFFDF2", + "color-warning-200": "#FFF1C2", + "color-warning-300": "#FFE59E", + "color-warning-400": "#FFC94D", + "color-warning-500": "#FFAA00", + "color-warning-600": "#DB8B00", + "color-warning-700": "#B86E00", + "color-warning-800": "#945400", + "color-warning-900": "#703C00", + "color-white": "#FFFFFF", + "font-primary-color": "#0D1C2E", + "font-primary-disabled-color": "#C8CEDB", + "font-primary-family": "", + "font-primary-regular-text-line-height": 16, + "font-primary-regular-text-size": 14, + "font-primary-regular-text-weight": "600", "gray-100": "#f7f8fa", "gray-200": "#edf0f5", "gray-300": "#c8cedb", @@ -565,6 +1240,11 @@ exports[`@top-navigation-bar/action * bar/with actions 1`] = ` "gray-highlight": "#EDF0F5", "gray-light": "#DDE1EB", "gray-primary": "#A6AEBD", + "opacity-transparent": "transparent", + "outline-color": "#DDE1EB", + "outline-disabled-color": "transparent", + "outline-disabled-width": 0, + "outline-width": 11, "pink-primary": "#FF3D71", "text-primary": "#000000", "text-primary-inverse": "#ffffff", diff --git a/src/playground/package.json b/src/playground/package.json index 429f35ddd..868b6c337 100644 --- a/src/playground/package.json +++ b/src/playground/package.json @@ -9,7 +9,7 @@ "expo": "^32.0.0", "react": "16.5.0", "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", - "react-navigation": "^3.0.7", + "react-navigation": "^3.0.9", "@eva/eva": "github:akveo/eva#package/mapping-eva", "@eva/theme-eva": "github:akveo/eva#package/theme-eva" }, diff --git a/src/playground/src/app.component.tsx b/src/playground/src/app.component.tsx index a9452ba1b..929206b6e 100644 --- a/src/playground/src/app.component.tsx +++ b/src/playground/src/app.component.tsx @@ -8,7 +8,7 @@ import * as Screens from './ui/screen'; export default class App extends React.Component { public render(): React.ReactNode { - const { Home: RootScreen, ...screens } = Screens; + const { CheckBox: RootScreen, ...screens } = Screens; const Router: React.ComponentClass = withNavigation(RootScreen, screens); return ( diff --git a/src/playground/src/ui/screen/checkbox.component.tsx b/src/playground/src/ui/screen/checkbox.component.tsx index 9d7da5973..37eb822b0 100644 --- a/src/playground/src/ui/screen/checkbox.component.tsx +++ b/src/playground/src/ui/screen/checkbox.component.tsx @@ -5,23 +5,25 @@ import { } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import { - withStyles, - ThemeType, ThemedComponentProps, + ThemeType, + withStyles, } from '@kitten/theme'; import { CheckBox } from '@kitten/ui'; type Props = & ThemedComponentProps & NavigationScreenProps; interface State { - isCheckBox1Checked: boolean; - isCheckBox2Checked: boolean; - isCheckBox3Checked: boolean; - isCheckBox4Checked: boolean; + isCheckBoxIndeterminateIndeterminate: boolean; + isCheckBoxIndeterminateChecked: boolean; + isCheckBoxPrimaryChecked: boolean; + isCheckBoxSuccessChecked: boolean; + isCheckBoxWarningChecked: boolean; + isCheckBoxDangerChecked: boolean; + isCheckBoxInfoChecked: boolean; + isCheckBoxWhiteChecked: boolean; } -const STATUS: string = ''; - class CheckBoxScreen extends React.Component { static navigationOptions = { @@ -29,82 +31,99 @@ class CheckBoxScreen extends React.Component { }; public state: State = { - isCheckBox1Checked: false, - isCheckBox2Checked: true, - isCheckBox3Checked: false, - isCheckBox4Checked: true, + isCheckBoxIndeterminateIndeterminate: true, + isCheckBoxIndeterminateChecked: true, + isCheckBoxPrimaryChecked: true, + isCheckBoxSuccessChecked: true, + isCheckBoxWarningChecked: true, + isCheckBoxDangerChecked: true, + isCheckBoxInfoChecked: true, + isCheckBoxWhiteChecked: true, + }; + + private onIndeterminateChange = (selected: boolean, indeterminate: boolean) => { + this.setState({ + isCheckBoxIndeterminateChecked: selected, + isCheckBoxIndeterminateIndeterminate: indeterminate, + }); + }; + + private onCheckBoxPrimaryChange = (selected: boolean) => { + this.setState({ isCheckBoxPrimaryChecked: selected }); }; - private onCheckBox1Change = (selected: boolean) => { - this.setState({ isCheckBox1Checked: selected }); + private onCheckBoxSuccessChange = (selected: boolean) => { + this.setState({ isCheckBoxSuccessChecked: selected }); }; - private onCheckBox2Change = (selected: boolean) => { - this.setState({ isCheckBox2Checked: selected }); + private onCheckBoxWarningChange = (selected: boolean) => { + this.setState({ isCheckBoxWarningChecked: selected }); }; - private onCheckBox3Change = (selected: boolean) => { - this.setState({ isCheckBox3Checked: selected }); + private onCheckBoxDangerChange = (selected: boolean) => { + this.setState({ isCheckBoxDangerChecked: selected }); }; - private onCheckBox4Change = (selected: boolean) => { - this.setState({ isCheckBox4Checked: selected }); + private onCheckBoxInfoChange = (selected: boolean) => { + this.setState({ isCheckBoxInfoChecked: selected }); + }; + + private onCheckBoxWhiteChange = (selected: boolean) => { + this.setState({ isCheckBoxWhiteChecked: selected }); }; public render(): React.ReactNode { return ( - Interactive + Indeterminate + + + + Status + - - - - Size - @@ -113,26 +132,22 @@ class CheckBoxScreen extends React.Component {