From c9f422d67b7758bf68a19361176c9b9f3d70c2a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Thu, 4 Aug 2022 12:03:56 +0300 Subject: [PATCH 1/8] Refactor gradients, shadows, focus, radius & transition styles to come from suomifi-design-tokens --- src/core/Button/Button.baseStyles.tsx | 4 +- .../Chip/BaseChip/BaseChip.baseStyles.tsx | 2 +- .../Dropdown/Dropdown/Dropdown.baseStyles.tsx | 4 +- .../Expander/Expander/Expander.baseStyles.tsx | 2 +- .../ExpanderGroup.baseStyles.tsx | 10 +- .../ExpanderTitle.baseStyles.tsx | 4 +- .../ExpanderTitleButton.baseStyles.tsx | 4 +- .../Form/Checkbox/Checkbox.baseStyles.tsx | 4 +- .../FilterInput/FilterInput.baseStyles.tsx | 2 +- .../InputClearButton.baseStyles.ts | 2 +- .../RadioButton/RadioButton.baseStyles.tsx | 2 +- .../SearchInput/SearchInput.baseStyles.tsx | 10 +- .../BaseSelect/SelectItem/SelectItem.tsx | 2 +- .../SelectItemAddition/SelectItemAddition.tsx | 2 +- .../SelectItemList.baseStyles.tsx | 4 +- .../Form/TextInput/TextInput.baseStyles.tsx | 2 +- .../Form/Textarea/Textarea.baseStyles.tsx | 2 +- .../ToggleButton/ToggeButton.baseStyles.tsx | 2 +- .../ToggleInput/ToggleInput.baseStyles.tsx | 2 +- .../LanguageMenu/LanguageMenu.baseStyles.tsx | 6 +- src/core/Link/BaseLink/BaseLink.baseStyles.ts | 2 +- .../Link/RouterLink/RouterLink.baseStyles.ts | 2 +- src/core/Modal/Modal/Modal.baseStyles.tsx | 4 +- src/core/Modal/Modal/Modal.tsx | 2 +- .../ModalTitle/ModalTitle.baseStyles.tsx | 2 +- .../Notification/Notification.baseStyles.ts | 4 +- .../TooltipContent.baseStyles.tsx | 4 +- .../TooltipToggleButton.baseStyles.tsx | 2 +- src/core/theme/SuomifiTheme/SuomifiTheme.ts | 91 +++++++------------ src/core/theme/SuomifiTheme/focus.ts | 37 -------- src/core/theme/SuomifiTheme/gradients.ts | 21 ----- src/core/theme/SuomifiTheme/radius.ts | 5 - src/core/theme/SuomifiTheme/shadows.ts | 14 --- src/core/theme/SuomifiTheme/transitions.ts | 4 - src/core/theme/index.ts | 6 +- src/core/theme/reset/index.ts | 2 +- src/index.tsx | 5 - 37 files changed, 83 insertions(+), 196 deletions(-) delete mode 100644 src/core/theme/SuomifiTheme/focus.ts delete mode 100644 src/core/theme/SuomifiTheme/gradients.ts delete mode 100644 src/core/theme/SuomifiTheme/radius.ts delete mode 100644 src/core/theme/SuomifiTheme/shadows.ts delete mode 100644 src/core/theme/SuomifiTheme/transitions.ts diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx index 96cd704b4..90eea958f 100644 --- a/src/core/Button/Button.baseStyles.tsx +++ b/src/core/Button/Button.baseStyles.tsx @@ -101,7 +101,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` min-height: 40px; color: ${theme.colors.whiteBase}; background: ${theme.gradients.highlightBaseToHighlightDark1}; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; text-align: center; text-shadow: ${theme.shadows.invertTextShadow}; cursor: pointer; @@ -111,7 +111,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &::after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } diff --git a/src/core/Chip/BaseChip/BaseChip.baseStyles.tsx b/src/core/Chip/BaseChip/BaseChip.baseStyles.tsx index 50d36dfa7..f60991df5 100644 --- a/src/core/Chip/BaseChip/BaseChip.baseStyles.tsx +++ b/src/core/Chip/BaseChip/BaseChip.baseStyles.tsx @@ -19,7 +19,7 @@ export const baseChipBaseStyles = (theme: SuomifiTheme) => css` position: relative; &::after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} border-radius: 16px; } } diff --git a/src/core/Dropdown/Dropdown/Dropdown.baseStyles.tsx b/src/core/Dropdown/Dropdown/Dropdown.baseStyles.tsx index 0e1143495..1893a0fff 100644 --- a/src/core/Dropdown/Dropdown/Dropdown.baseStyles.tsx +++ b/src/core/Dropdown/Dropdown/Dropdown.baseStyles.tsx @@ -31,7 +31,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } @@ -74,7 +74,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` border-color: ${theme.colors.depthDark3}; border-style: solid; border-width: 0 1px 1px 1px; - border-radius: 0px 0px ${theme.radius.basic} ${theme.radius.basic}; + border-radius: 0px 0px ${theme.radiuses.basic} ${theme.radiuses.basic}; max-height: 265px; overflow-y: auto; overflow-x: hidden; diff --git a/src/core/Expander/Expander/Expander.baseStyles.tsx b/src/core/Expander/Expander/Expander.baseStyles.tsx index 9e499483b..c06e628a6 100644 --- a/src/core/Expander/Expander/Expander.baseStyles.tsx +++ b/src/core/Expander/Expander/Expander.baseStyles.tsx @@ -8,7 +8,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` background-color: ${theme.colors.whiteBase}; position: relative; padding: 0; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; box-shadow: ${theme.shadows.panelShadow}; width: 100%; max-width: 100%; diff --git a/src/core/Expander/ExpanderGroup/ExpanderGroup.baseStyles.tsx b/src/core/Expander/ExpanderGroup/ExpanderGroup.baseStyles.tsx index 66740c5f2..acd02554e 100644 --- a/src/core/Expander/ExpanderGroup/ExpanderGroup.baseStyles.tsx +++ b/src/core/Expander/ExpanderGroup/ExpanderGroup.baseStyles.tsx @@ -27,12 +27,12 @@ export const baseStyles = (theme: SuomifiTheme) => css` } &:first-child { border-top: none; - border-radius: ${theme.radius.basic} ${theme.radius.basic} 0 0; + border-radius: ${theme.radiuses.basic} ${theme.radiuses.basic} 0 0; } &:last-child { /* stylelint-disable */ /* prettier-ignore */ - border-radius: 0 0 ${theme.radius.basic} ${theme.radius.basic}; + border-radius: 0 0 ${theme.radiuses.basic} ${theme.radiuses.basic}; } &.fi-expander--open { border-top: none; @@ -58,7 +58,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` margin-bottom: ${theme.spacing.insetM}; padding: ${theme.spacing.insetXs} 0; color: ${theme.colors.highlightBase}; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; border: none; cursor: pointer; @@ -67,9 +67,9 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } - ${theme.focus.noMouseFocus} + ${theme.focuses.noMouseFocus} } `; diff --git a/src/core/Expander/ExpanderTitle/ExpanderTitle.baseStyles.tsx b/src/core/Expander/ExpanderTitle/ExpanderTitle.baseStyles.tsx index 8e41a83ce..7fb4e20a7 100644 --- a/src/core/Expander/ExpanderTitle/ExpanderTitle.baseStyles.tsx +++ b/src/core/Expander/ExpanderTitle/ExpanderTitle.baseStyles.tsx @@ -49,10 +49,10 @@ export const expanderTitleBaseStyles = (theme: SuomifiTheme) => css` &:focus-within { outline: 0; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } - ${theme.focus.noMouseFocus} + ${theme.focuses.noMouseFocus} & * { cursor: pointer; } diff --git a/src/core/Expander/ExpanderTitleButton/ExpanderTitleButton.baseStyles.tsx b/src/core/Expander/ExpanderTitleButton/ExpanderTitleButton.baseStyles.tsx index 091744d1d..96582aeb2 100644 --- a/src/core/Expander/ExpanderTitleButton/ExpanderTitleButton.baseStyles.tsx +++ b/src/core/Expander/ExpanderTitleButton/ExpanderTitleButton.baseStyles.tsx @@ -38,10 +38,10 @@ export const expanderTitleButtonBaseStyles = (theme: SuomifiTheme) => css` &:focus-within { outline: 0; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } - ${theme.focus.noMouseFocus} + ${theme.focuses.noMouseFocus} & * { cursor: pointer; } diff --git a/src/core/Form/Checkbox/Checkbox.baseStyles.tsx b/src/core/Form/Checkbox/Checkbox.baseStyles.tsx index 3235aad08..a9a275335 100644 --- a/src/core/Form/Checkbox/Checkbox.baseStyles.tsx +++ b/src/core/Form/Checkbox/Checkbox.baseStyles.tsx @@ -102,7 +102,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` height: 18px; width: 18px; border: 1px solid ${theme.colors.depthDark3}; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; background-color: ${theme.colors.whiteBase}; } } @@ -118,7 +118,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` &:focus-within { & .fi-checkbox_label { &::before { - ${theme.focus.boxShadowFocus} + ${theme.focuses.boxShadowFocus} } } } diff --git a/src/core/Form/FilterInput/FilterInput.baseStyles.tsx b/src/core/Form/FilterInput/FilterInput.baseStyles.tsx index cde6ad70c..68990a05d 100644 --- a/src/core/Form/FilterInput/FilterInput.baseStyles.tsx +++ b/src/core/Form/FilterInput/FilterInput.baseStyles.tsx @@ -55,7 +55,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &::after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } } diff --git a/src/core/Form/InputClearButton/InputClearButton.baseStyles.ts b/src/core/Form/InputClearButton/InputClearButton.baseStyles.ts index 635978813..b1581e1dd 100644 --- a/src/core/Form/InputClearButton/InputClearButton.baseStyles.ts +++ b/src/core/Form/InputClearButton/InputClearButton.baseStyles.ts @@ -12,7 +12,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` &:focus { outline: none; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } &.fi-input-clear-button { diff --git a/src/core/Form/RadioButton/RadioButton.baseStyles.tsx b/src/core/Form/RadioButton/RadioButton.baseStyles.tsx index 2bca3e1e9..25fcbe8af 100644 --- a/src/core/Form/RadioButton/RadioButton.baseStyles.tsx +++ b/src/core/Form/RadioButton/RadioButton.baseStyles.tsx @@ -109,7 +109,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` &:focus { outline: 0; + .fi-radio-button_icon_wrapper { - ${theme.focus.boxShadowFocus} + ${theme.focuses.boxShadowFocus} border-radius: 50%; } } diff --git a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx index 25327071b..1d9f61841 100644 --- a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx +++ b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx @@ -34,7 +34,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; box-shadow: ${theme.shadows.actionElementBoxShadow}; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} top: -3px; bottom: -3px; right: -3px; @@ -48,7 +48,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` height: 40px; box-sizing: border-box; border: 1px solid ${theme.colors.depthDark3}; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; } &_input { @@ -118,7 +118,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` right: 0px; height: 40px; width: 40px; - border-radius: 0 ${theme.radius.basic} ${theme.radius.basic} 0; + border-radius: 0 ${theme.radiuses.basic} ${theme.radiuses.basic} 0; border: 0; &-icon { width: 18px; @@ -149,7 +149,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` &.fi-search-input--not-empty { & .fi-search-input_input-element-container { width: calc(100% - 40px); - border-radius: ${theme.radius.basic} 0 0 ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic} 0 0 ${theme.radiuses.basic}; border-right: 0; } @@ -162,7 +162,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` background: ${theme.gradients.highlightBaseToHighlightDark1}; &:focus { &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } &:hover { diff --git a/src/core/Form/Select/BaseSelect/SelectItem/SelectItem.tsx b/src/core/Form/Select/BaseSelect/SelectItem/SelectItem.tsx index ca0cd1921..82adbf39b 100644 --- a/src/core/Form/Select/BaseSelect/SelectItem/SelectItem.tsx +++ b/src/core/Form/Select/BaseSelect/SelectItem/SelectItem.tsx @@ -20,7 +20,7 @@ const selectItemClassNames = { export interface SelectItemProps { /** Unique id for the item */ id: string; - /** Indicates if the current item has keyboard focus. */ + /** Indicates if the current item has keyboard focuses. */ hasKeyboardFocus: boolean; /** Query for matching string type item children for highlighting text. */ hightlightQuery: string | undefined; diff --git a/src/core/Form/Select/BaseSelect/SelectItemAddition/SelectItemAddition.tsx b/src/core/Form/Select/BaseSelect/SelectItemAddition/SelectItemAddition.tsx index 692d2e34b..ecfb181c1 100644 --- a/src/core/Form/Select/BaseSelect/SelectItemAddition/SelectItemAddition.tsx +++ b/src/core/Form/Select/BaseSelect/SelectItemAddition/SelectItemAddition.tsx @@ -18,7 +18,7 @@ export interface SelectItemAdditionProps { hintText: string; /** onClick event handler */ onClick: (event: React.MouseEvent) => void; - /** Indicates if the current item has keyboard focus. */ + /** Indicates if the current item has keyboard focuses. */ hasKeyboardFocus: boolean; /** Unique id for the item */ id: string; diff --git a/src/core/Form/Select/BaseSelect/SelectItemList/SelectItemList.baseStyles.tsx b/src/core/Form/Select/BaseSelect/SelectItemList/SelectItemList.baseStyles.tsx index f158951fb..9a67ab5c9 100644 --- a/src/core/Form/Select/BaseSelect/SelectItemList/SelectItemList.baseStyles.tsx +++ b/src/core/Form/Select/BaseSelect/SelectItemList/SelectItemList.baseStyles.tsx @@ -11,8 +11,8 @@ export const baseStyles = (theme: SuomifiTheme) => css` border-width: 0 1px 1px 1px; border-style: solid; border-color: ${theme.colors.depthDark3}; - border-bottom-left-radius: ${theme.radius.basic}; - border-bottom-right-radius: ${theme.radius.basic}; + border-bottom-left-radius: ${theme.radiuses.basic}; + border-bottom-right-radius: ${theme.radiuses.basic}; margin: 0; padding: 4px 0 0 0; diff --git a/src/core/Form/TextInput/TextInput.baseStyles.tsx b/src/core/Form/TextInput/TextInput.baseStyles.tsx index a1cce14a7..28e1d831b 100644 --- a/src/core/Form/TextInput/TextInput.baseStyles.tsx +++ b/src/core/Form/TextInput/TextInput.baseStyles.tsx @@ -31,7 +31,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &::after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } } diff --git a/src/core/Form/Textarea/Textarea.baseStyles.tsx b/src/core/Form/Textarea/Textarea.baseStyles.tsx index 005e3402c..e8718ecee 100644 --- a/src/core/Form/Textarea/Textarea.baseStyles.tsx +++ b/src/core/Form/Textarea/Textarea.baseStyles.tsx @@ -23,7 +23,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &::after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } } diff --git a/src/core/Form/Toggle/ToggleButton/ToggeButton.baseStyles.tsx b/src/core/Form/Toggle/ToggleButton/ToggeButton.baseStyles.tsx index 35517ecb5..0b7685d3d 100644 --- a/src/core/Form/Toggle/ToggleButton/ToggeButton.baseStyles.tsx +++ b/src/core/Form/Toggle/ToggleButton/ToggeButton.baseStyles.tsx @@ -15,7 +15,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` outline: 0; & .fi-toggle_icon-container { &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} ${focusOverrides} } } diff --git a/src/core/Form/Toggle/ToggleInput/ToggleInput.baseStyles.tsx b/src/core/Form/Toggle/ToggleInput/ToggleInput.baseStyles.tsx index cf0f34db2..4adc541aa 100644 --- a/src/core/Form/Toggle/ToggleInput/ToggleInput.baseStyles.tsx +++ b/src/core/Form/Toggle/ToggleInput/ToggleInput.baseStyles.tsx @@ -15,7 +15,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` outline: 0; & .fi-toggle_icon-container { &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} ${focusOverrides} } } diff --git a/src/core/LanguageMenu/LanguageMenu/LanguageMenu.baseStyles.tsx b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.baseStyles.tsx index 8e9cf6c6d..8bf190efd 100644 --- a/src/core/LanguageMenu/LanguageMenu/LanguageMenu.baseStyles.tsx +++ b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.baseStyles.tsx @@ -15,7 +15,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` line-height: 24px; background-color: ${theme.colors.whiteBase}; border: 1px solid transparent; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; word-break: break-word; & > .fi-language-menu-language_icon { height: 1em; @@ -33,7 +33,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &::after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } @@ -61,7 +61,7 @@ export const languageMenuPopoverStyles = (theme: SuomifiTheme) => css` box-sizing: content-box; margin-top: 12px; border: 1px solid ${theme.colors.depthLight1}; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; &:before, &:after { content: ''; diff --git a/src/core/Link/BaseLink/BaseLink.baseStyles.ts b/src/core/Link/BaseLink/BaseLink.baseStyles.ts index 322d5e54d..bca11eb0f 100644 --- a/src/core/Link/BaseLink/BaseLink.baseStyles.ts +++ b/src/core/Link/BaseLink/BaseLink.baseStyles.ts @@ -17,7 +17,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` } &:focus { - ${theme.focus.boxShadowFocus} + ${theme.focuses.boxShadowFocus} } &:hover, diff --git a/src/core/Link/RouterLink/RouterLink.baseStyles.ts b/src/core/Link/RouterLink/RouterLink.baseStyles.ts index 206e1d9d7..b28697c17 100644 --- a/src/core/Link/RouterLink/RouterLink.baseStyles.ts +++ b/src/core/Link/RouterLink/RouterLink.baseStyles.ts @@ -17,7 +17,7 @@ export const RouterLinkStyles = (theme: SuomifiTheme) => css` } &:focus { - ${theme.focus.boxShadowFocus} + ${theme.focuses.boxShadowFocus} } &:hover, diff --git a/src/core/Modal/Modal/Modal.baseStyles.tsx b/src/core/Modal/Modal/Modal.baseStyles.tsx index c415f50fe..87c13f2f3 100644 --- a/src/core/Modal/Modal/Modal.baseStyles.tsx +++ b/src/core/Modal/Modal/Modal.baseStyles.tsx @@ -22,7 +22,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` } } & .fi-modal { - border-radius: ${theme.radius.modal}; + border-radius: ${theme.radiuses.modal}; background-color: ${theme.colors.whiteBase}; border-top: ${theme.spacing.insetXs} solid ${theme.colors.highlightBase}; overflow: hidden; @@ -40,7 +40,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` } &:focus-visible { - ${theme.focus.boxShadowFocus} + ${theme.focuses.boxShadowFocus} } &--no-scroll { diff --git a/src/core/Modal/Modal/Modal.tsx b/src/core/Modal/Modal/Modal.tsx index dedf0feb3..9ce1ce3b9 100644 --- a/src/core/Modal/Modal/Modal.tsx +++ b/src/core/Modal/Modal/Modal.tsx @@ -33,7 +33,7 @@ export interface ModalProps { scrollable?: boolean; /** Focusable element ref when modal is opened. If not provided, modal title is focused. */ focusOnOpenRef?: React.RefObject; - /** Focusable element ref when modal is closed. If not provided, previously focused element will regain focus. */ + /** Focusable element ref when modal is closed. If not provided, previously focused element will regain focuses. */ focusOnCloseRef?: React.RefObject; /** Callback for handling esc key press, e.g. close modal */ onEscKeyDown?: () => void; diff --git a/src/core/Modal/ModalTitle/ModalTitle.baseStyles.tsx b/src/core/Modal/ModalTitle/ModalTitle.baseStyles.tsx index 2d8e617e1..18c0fab44 100644 --- a/src/core/Modal/ModalTitle/ModalTitle.baseStyles.tsx +++ b/src/core/Modal/ModalTitle/ModalTitle.baseStyles.tsx @@ -14,7 +14,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` &:focus { outline: 0; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } } diff --git a/src/core/Notification/Notification.baseStyles.ts b/src/core/Notification/Notification.baseStyles.ts index dc25fccfb..e5686cdea 100644 --- a/src/core/Notification/Notification.baseStyles.ts +++ b/src/core/Notification/Notification.baseStyles.ts @@ -64,7 +64,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` padding: 7px; margin-top: 11px; border: 1px solid transparent; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; white-space: nowrap; text-transform: uppercase; @@ -80,7 +80,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } &:active { diff --git a/src/core/Tooltip/TooltipContent/TooltipContent.baseStyles.tsx b/src/core/Tooltip/TooltipContent/TooltipContent.baseStyles.tsx index 481ab1bda..7bc9ea0ea 100644 --- a/src/core/Tooltip/TooltipContent/TooltipContent.baseStyles.tsx +++ b/src/core/Tooltip/TooltipContent/TooltipContent.baseStyles.tsx @@ -9,7 +9,7 @@ export const baseStyles = (arrowOffsetPx: number, theme: SuomifiTheme) => css` margin-bottom: 10px; position: relative; border: 1px solid ${theme.colors.depthDark2}; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; background-color: ${theme.colors.highlightLight4}; padding: 20px 43px 20px 20px; box-shadow: ${theme.shadows.menuShadow}; @@ -63,7 +63,7 @@ export const baseStyles = (arrowOffsetPx: number, theme: SuomifiTheme) => css` &:focus-visible { outline: 0; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } &:hover { diff --git a/src/core/Tooltip/TooltipToggleButton/TooltipToggleButton.baseStyles.tsx b/src/core/Tooltip/TooltipToggleButton/TooltipToggleButton.baseStyles.tsx index d9d67c5b8..3893461fe 100644 --- a/src/core/Tooltip/TooltipToggleButton/TooltipToggleButton.baseStyles.tsx +++ b/src/core/Tooltip/TooltipToggleButton/TooltipToggleButton.baseStyles.tsx @@ -12,7 +12,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` outline: 0; position: relative; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } diff --git a/src/core/theme/SuomifiTheme/SuomifiTheme.ts b/src/core/theme/SuomifiTheme/SuomifiTheme.ts index db4f69103..1de0f9374 100644 --- a/src/core/theme/SuomifiTheme/SuomifiTheme.ts +++ b/src/core/theme/SuomifiTheme/SuomifiTheme.ts @@ -4,25 +4,24 @@ import { SpacingDesignTokens, suomifiDesignTokens, TypographyDesignTokens, + GradientDesignTokens, + RadiusDesignTokens, + ShadowDesignTokens, + FocusDesignTokens, + TransitionDesignTokens, } from 'suomifi-design-tokens'; -import { shadows } from './shadows'; -import { gradients } from './gradients'; -import { boxShadowFocus, absoluteFocus, noMouseFocus } from './focus'; import { zindexes } from './zindexes'; -import { transitions } from './transitions'; -import { radius } from './radius'; - -export type GradientDesignTokens = typeof derivedTokens.gradients; -export type FocusDesignTokens = typeof derivedTokens.focus; -export type RadiusDesignTokens = typeof radius; -export type ShadowDesignTokens = typeof derivedTokens.shadows; -export type TransitionDesignTokens = typeof transitions; export type ZIndexDesignTokens = typeof zindexes; export type SuomifiDesignTokens = typeof designTokens; export type ColorProp = keyof ColorDesignTokens; export type TypographyProp = keyof TypographyDesignTokens; export type SpacingProp = keyof SpacingDesignTokens | '0'; +export type GradientProp = keyof GradientDesignTokens; +export type RadiusProp = keyof RadiusDesignTokens; +export type ShadowProp = keyof ShadowDesignTokens; +export type FocusProp = keyof FocusDesignTokens; +export type TransitionProp = keyof TransitionDesignTokens; /** * SuomifiTheme @@ -34,9 +33,9 @@ export interface SuomifiTheme { /** Gradient design tokens as [key:string]: CSS string format with key derived from gradient name colors */ gradients: GradientDesignTokens; /** Focus design tokens as [key:string]: CSS string format for pseudo and regular styles and disabling mouse focus */ - focus: FocusDesignTokens; + focuses: FocusDesignTokens; /** Radius design tokens as [key:string]: CSS string format with radius use case name as key */ - radius: RadiusDesignTokens; + radiuses: RadiusDesignTokens; /** Shadow design tokens as [key:string]: CSS string format with shadow type name as key */ shadows: ShadowDesignTokens; /** Spacing design tokens as [key:string]: CSS string format with spacing size name as key */ @@ -62,37 +61,28 @@ export interface SuomifiThemeProp { const designTokens = { zindexes, - transitions, - radius, + shadows: suomifiDesignTokens.shadows, + focuses: suomifiDesignTokens.focuses, + transitions: suomifiDesignTokens.transitions, + radiuses: suomifiDesignTokens.radiuses, colors: suomifiDesignTokens.colors, spacing: suomifiDesignTokens.spacing, typography: suomifiDesignTokens.typography, + gradients: suomifiDesignTokens.gradients, values: suomifiDesignTokens.values, }; -const derivedTokens = { - focus: { - absoluteFocus: absoluteFocus(designTokens), - boxShadowFocus: boxShadowFocus(designTokens), - noMouseFocus, - }, - shadows: shadows(designTokens.colors), - gradients: gradients(designTokens.colors), -}; - /** SuomifiTheme with default values */ export const defaultSuomifiTheme: SuomifiTheme = { // Get all design tokens ...designTokens, - // Get all derived tokens - ...derivedTokens, }; export interface PartialSuomifiTheme { colors?: Partial; gradients?: Partial; - focus?: Partial; - radius?: Partial; + focuses?: Partial; + radiuses?: Partial; shadows?: Partial; spacing?: Partial; transitions?: Partial; @@ -123,9 +113,9 @@ export const getSuomifiTheme = ( defaultTokens: defaultTheme.transitions, customTokens: customTheme?.transitions, }), - radius: mergeTokens({ - defaultTokens: defaultTheme.radius, - customTokens: customTheme?.radius, + radiuses: mergeTokens({ + defaultTokens: defaultTheme.radiuses, + customTokens: customTheme?.radiuses, }), colors: mergeTokens({ defaultTokens: defaultTheme.colors, @@ -139,35 +129,22 @@ export const getSuomifiTheme = ( defaultTokens: defaultTheme.typography, customTokens: customTheme?.typography, }), + gradients: mergeTokens({ + defaultTokens: defaultTheme.gradients, + customTokens: customTheme?.gradients, + }), + focuses: mergeTokens({ + defaultTokens: defaultTheme.focuses, + customTokens: customTheme?.focuses, + }), + shadows: mergeTokens({ + defaultTokens: defaultTheme.shadows, + customTokens: customTheme?.shadows, + }), values: defaultTheme.values, }; - const derivedCustomTokens = { - focus: !!customTheme?.focus - ? mergeTokens({ - defaultTokens: defaultTheme.focus, - customTokens: customTheme?.focus, - }) - : { - absoluteFocus: absoluteFocus(customTokens), - boxShadowFocus: boxShadowFocus(customTokens), - noMouseFocus, - }, - shadows: !!customTheme?.shadows - ? mergeTokens({ - defaultTokens: defaultTheme.shadows, - customTokens: customTheme?.shadows, - }) - : shadows(customTokens.colors), - gradients: !!customTheme?.gradients - ? mergeTokens({ - defaultTokens: defaultTheme.gradients, - customTokens: customTheme?.gradients, - }) - : gradients(customTokens.colors), - }; const theme = { ...customTokens, - ...derivedCustomTokens, }; return theme; }; diff --git a/src/core/theme/SuomifiTheme/focus.ts b/src/core/theme/SuomifiTheme/focus.ts deleted file mode 100644 index cf4721e54..000000000 --- a/src/core/theme/SuomifiTheme/focus.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { css, FlattenSimpleInterpolation } from 'styled-components'; -import { SuomifiDesignTokens } from '../'; - -export const absoluteFocus: ( - tokens: SuomifiDesignTokens, -) => FlattenSimpleInterpolation = (tokens) => css` - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - right: -2px; - bottom: -2px; - left: -2px; - border-radius: ${tokens.radius.focus}; - background-color: transparent; - border: 0px solid ${tokens.colors.whiteBase}; - box-sizing: border-box; - box-shadow: 0 0 0 2px ${tokens.colors.accentSecondary}; - z-index: ${tokens.zindexes.focus}; -`; - -export const boxShadowFocus: ( - tokens: SuomifiDesignTokens, -) => FlattenSimpleInterpolation = (tokens) => css` - outline: 0; - border-radius: ${tokens.radius.focus}; - box-shadow: 0 0 0 2px ${tokens.colors.accentSecondary}; -`; - -export const noMouseFocus = css` - :not(:focus-visible) { - outline: 0; - &:after { - content: none; - } - } -`; diff --git a/src/core/theme/SuomifiTheme/gradients.ts b/src/core/theme/SuomifiTheme/gradients.ts deleted file mode 100644 index 78c12761a..000000000 --- a/src/core/theme/SuomifiTheme/gradients.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ColorDesignTokens } from 'suomifi-design-tokens'; -import { alphaHex } from '../../../utils/css'; - -export const gradients = (colors: ColorDesignTokens) => ({ - highlightBaseToHighlightDark1: `linear-gradient(0deg, ${colors.highlightDark1} 0%, ${colors.highlightBase} 100%)`, - highlightLight1ToHighlightBase: `linear-gradient(0deg, ${colors.highlightBase} 0%, ${colors.highlightLight1} 100%)`, - depthLight1ToDepthBase: `linear-gradient(0deg, ${colors.depthBase} 0%, ${colors.depthLight1} 100%)`, - whiteBaseNegative: `linear-gradient(-180deg, ${alphaHex(0.1)( - colors.whiteBase, - )} 0%, ${alphaHex(0)(colors.whiteBase)} 100%)`, - whiteBaseToDepthLight2: `linear-gradient(-180deg, ${ - colors.depthLight2 - } 0%, ${alphaHex(0)(colors.whiteBase)} 100%)`, - whiteBaseToDepthLight1: `linear-gradient(-180deg, ${ - colors.depthLight1 - } 0%, ${alphaHex(0)(colors.whiteBase)} 100%)`, - highlightLight3ToHighlightLight2: `linear-gradient(0deg, ${colors.highlightLight2}, ${colors.highlightLight3})`, - depthLight3ToDepthLight2: `linear-gradient(0deg, ${colors.depthLight2}, ${colors.depthLight3})`, - depthSecondaryToDepthSecondaryDark1: `linear-gradient(0deg, ${colors.depthSecondaryDark1}, ${colors.depthSecondary})`, - highlightLight4ToDepthSecondary: `linear-gradient(0deg, ${colors.depthSecondary}, ${colors.highlightLight4})`, -}); diff --git a/src/core/theme/SuomifiTheme/radius.ts b/src/core/theme/SuomifiTheme/radius.ts deleted file mode 100644 index bba06b62c..000000000 --- a/src/core/theme/SuomifiTheme/radius.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const radius = { - basic: '2px', - focus: '2px', - modal: '4px', -}; diff --git a/src/core/theme/SuomifiTheme/shadows.ts b/src/core/theme/SuomifiTheme/shadows.ts deleted file mode 100644 index e02e371bc..000000000 --- a/src/core/theme/SuomifiTheme/shadows.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { ColorDesignTokens } from 'suomifi-design-tokens'; -import { alphaHex } from '../../../utils/css'; - -export const shadows = (colors: ColorDesignTokens) => ({ - invertTextShadow: `0 1px 1px ${alphaHex(0.5)(colors.brandBase)}`, - menuShadow: `0 2px 3px 0 ${alphaHex(0.2)(colors.blackBase)}`, - panelShadow: `0 1px 2px 0 ${alphaHex(0.14)( - colors.blackBase, - )}, 0 1px 5px 0 ${alphaHex(0.12)(colors.blackBase)}`, - actionElementBoxShadow: `0 1px 2px 0 ${alphaHex(0.1)( - colors.brandBase, - )} inset`, - wideBoxShadow: `0px 4px 8px 0px ${alphaHex(0.14)(colors.blackBase)}`, -}); diff --git a/src/core/theme/SuomifiTheme/transitions.ts b/src/core/theme/SuomifiTheme/transitions.ts deleted file mode 100644 index 23e244c8b..000000000 --- a/src/core/theme/SuomifiTheme/transitions.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const transitions = { - basicTime: '50ms', - basicTimingFunction: 'cubic-bezier(0.28, 0.84, 0.42, 1)', -}; diff --git a/src/core/theme/index.ts b/src/core/theme/index.ts index ffa2fc69c..34e74a406 100644 --- a/src/core/theme/index.ts +++ b/src/core/theme/index.ts @@ -6,11 +6,6 @@ export { } from './SuomifiThemeProvider/SuomifiThemeProvider'; export { SuomifiTheme, - GradientDesignTokens, - FocusDesignTokens, - RadiusDesignTokens, - ShadowDesignTokens, - TransitionDesignTokens, ZIndexDesignTokens, SuomifiDesignTokens, getSuomifiTheme, @@ -21,4 +16,5 @@ export { ColorProp, TypographyProp, SpacingProp, + GradientProp, } from './SuomifiTheme/SuomifiTheme'; diff --git a/src/core/theme/reset/index.ts b/src/core/theme/reset/index.ts index 56d2f4427..1bf722204 100644 --- a/src/core/theme/reset/index.ts +++ b/src/core/theme/reset/index.ts @@ -27,7 +27,7 @@ export const input = (theme: SuomifiTheme) => css` max-width: 100%; padding: ${theme.spacing.insetM} ${theme.spacing.insetXl}; border: 1px solid ${theme.colors.depthLight1}; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; line-height: 1; `; diff --git a/src/index.tsx b/src/index.tsx index 291286a05..6d35fd2d7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -140,11 +140,6 @@ export { } from './core/VisuallyHidden/VisuallyHidden'; export { SuomifiTheme, - GradientDesignTokens, - FocusDesignTokens, - RadiusDesignTokens, - ShadowDesignTokens, - TransitionDesignTokens, ZIndexDesignTokens, SuomifiDesignTokens, defaultSuomifiTheme, From f1159f0f4668d400c8303d69c6d7d608a87c2abd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Fri, 26 Aug 2022 11:54:33 +0300 Subject: [PATCH 2/8] Update suomifi-design-tokens to version 4.1.0 (derived tokens) --- package.json | 2 +- src/core/Alert/Alert/Alert.baseStyles.ts | 4 ++-- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 0dd096f0d..5ffcb3ecc 100644 --- a/package.json +++ b/package.json @@ -163,7 +163,7 @@ "react-modal": "3.15.1", "react-popper": "2.3.0", "react-svg": "15.1.3", - "suomifi-design-tokens": "4.0.0", + "suomifi-design-tokens": "4.1.0", "suomifi-icons": "6.3.0" }, "peerDependencies": { diff --git a/src/core/Alert/Alert/Alert.baseStyles.ts b/src/core/Alert/Alert/Alert.baseStyles.ts index 1354df57f..720e4e132 100644 --- a/src/core/Alert/Alert/Alert.baseStyles.ts +++ b/src/core/Alert/Alert/Alert.baseStyles.ts @@ -32,7 +32,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` margin-right: ${theme.spacing.xs}; margin-bottom: ${theme.spacing.insetM}; border: 1px solid transparent; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; white-space: nowrap; &:focus-visible { @@ -40,7 +40,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } &:active { diff --git a/yarn.lock b/yarn.lock index 92074d9b2..e2ffd4ab5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12209,10 +12209,10 @@ stylelint@14.9.1: v8-compile-cache "^2.3.0" write-file-atomic "^4.0.1" -suomifi-design-tokens@4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-4.0.0.tgz#c8a95c3fa3c7f09a8aeee7006c749c3b2d115938" - integrity sha512-4wAOIs2VpsgSy3BQ1yeP1GM+T48U6ZhePDY1woOsKdCVULZML8BJ6ww8jbpl8tkssaTZRT+O+wYT8CxLZaZTkA== +suomifi-design-tokens@4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-4.1.0.tgz#4336511b75f5baafef1800dba9e2e176ecfa2e35" + integrity sha512-1dNvMAC5y57DCa6uo7pCD8mrwqUbGxIHcNDz80FdFhG2gIG9Ys9qipZXhBBeRiJfA/60aGhWOlbg/gUGGm37Dg== suomifi-icons@6.3.0: version "6.3.0" From 5bd886cb5548cda77e420d6d49d3a263ddb21f48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Tue, 31 Jan 2023 15:55:41 +0200 Subject: [PATCH 3/8] radius --> radiuses, focus --> focuses in newer component styles --- .../ServiceNavigation/ServiceNavigation.baseStyles.tsx | 2 +- .../ServiceNavigationItem.baseStyles.tsx | 4 ++-- .../SideNavigation/SideNavigation.baseStyles.tsx | 2 +- .../SideNavigationItem.baseStyles.tsx | 10 +++++----- .../WizardNavigation/WizardNavigation.baseStyles.tsx | 2 +- .../WizardNavigationItem.baseStyles.tsx | 2 +- src/core/Pagination/PageInput/PageInput.baseStyles.tsx | 10 +++++----- .../TooltipContent/TooltipContent.baseStyles.tsx | 2 +- 8 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/core/Navigation/ServiceNavigation/ServiceNavigation/ServiceNavigation.baseStyles.tsx b/src/core/Navigation/ServiceNavigation/ServiceNavigation/ServiceNavigation.baseStyles.tsx index 82231b41c..8b4b44bc5 100644 --- a/src/core/Navigation/ServiceNavigation/ServiceNavigation/ServiceNavigation.baseStyles.tsx +++ b/src/core/Navigation/ServiceNavigation/ServiceNavigation/ServiceNavigation.baseStyles.tsx @@ -30,7 +30,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` &:focus { outline: 0; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } diff --git a/src/core/Navigation/ServiceNavigation/ServiceNavigationItem/ServiceNavigationItem.baseStyles.tsx b/src/core/Navigation/ServiceNavigation/ServiceNavigationItem/ServiceNavigationItem.baseStyles.tsx index 7ee4b3539..96f8656ed 100644 --- a/src/core/Navigation/ServiceNavigation/ServiceNavigationItem/ServiceNavigationItem.baseStyles.tsx +++ b/src/core/Navigation/ServiceNavigation/ServiceNavigationItem/ServiceNavigationItem.baseStyles.tsx @@ -23,7 +23,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` } &:focus-within { - ${theme.focus.boxShadowFocus}; + ${theme.focuses.boxShadowFocus}; z-index: ${theme.zindexes.focus}; } @@ -84,7 +84,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; &:focus { - ${theme.focus.absoluteFocus}; + ${theme.focuses.absoluteFocus}; } .fi-link--router { diff --git a/src/core/Navigation/SideNavigation/SideNavigation/SideNavigation.baseStyles.tsx b/src/core/Navigation/SideNavigation/SideNavigation/SideNavigation.baseStyles.tsx index fd6e7bd44..edbfcb253 100644 --- a/src/core/Navigation/SideNavigation/SideNavigation/SideNavigation.baseStyles.tsx +++ b/src/core/Navigation/SideNavigation/SideNavigation/SideNavigation.baseStyles.tsx @@ -55,7 +55,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` outline: 0; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } diff --git a/src/core/Navigation/SideNavigation/SideNavigationItem/SideNavigationItem.baseStyles.tsx b/src/core/Navigation/SideNavigation/SideNavigationItem/SideNavigationItem.baseStyles.tsx index 37bc44738..86077fd94 100644 --- a/src/core/Navigation/SideNavigation/SideNavigationItem/SideNavigationItem.baseStyles.tsx +++ b/src/core/Navigation/SideNavigation/SideNavigationItem/SideNavigationItem.baseStyles.tsx @@ -40,7 +40,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` background: ${theme.colors.highlightBase}; text-decoration: none; color: ${theme.colors.whiteBase}; - border-radius: ${theme.radius.modal}; + border-radius: ${theme.radiuses.modal}; } &:focus-visible { @@ -49,7 +49,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` box-shadow: none; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } } @@ -88,7 +88,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` color: ${theme.colors.whiteBase}; font-weight: 600; background: ${theme.colors.highlightBase}; - border-radius: ${theme.radius.modal}; + border-radius: ${theme.radiuses.modal}; } } @@ -103,8 +103,8 @@ export const baseStyles = (theme: SuomifiTheme) => css` font-weight: 600; background: ${theme.colors.highlightBase}; color: ${theme.colors.whiteBase}; - border-top-left-radius: ${theme.radius.modal}; - border-top-right-radius: ${theme.radius.modal}; + border-top-left-radius: ${theme.radiuses.modal}; + border-top-right-radius: ${theme.radiuses.modal}; border-bottom-left-radius: 0; border-bottom-right-radius: 0; diff --git a/src/core/Navigation/WizardNavigation/WizardNavigation/WizardNavigation.baseStyles.tsx b/src/core/Navigation/WizardNavigation/WizardNavigation/WizardNavigation.baseStyles.tsx index 7cf5b6795..b0b0220a4 100644 --- a/src/core/Navigation/WizardNavigation/WizardNavigation/WizardNavigation.baseStyles.tsx +++ b/src/core/Navigation/WizardNavigation/WizardNavigation/WizardNavigation.baseStyles.tsx @@ -37,7 +37,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` &:focus { outline: 0; &:before { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } diff --git a/src/core/Navigation/WizardNavigation/WizardNavigationItem/WizardNavigationItem.baseStyles.tsx b/src/core/Navigation/WizardNavigation/WizardNavigationItem/WizardNavigationItem.baseStyles.tsx index b759547d7..6724b0681 100644 --- a/src/core/Navigation/WizardNavigation/WizardNavigationItem/WizardNavigationItem.baseStyles.tsx +++ b/src/core/Navigation/WizardNavigation/WizardNavigationItem/WizardNavigationItem.baseStyles.tsx @@ -30,7 +30,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` } &:focus-within { - ${theme.focus.boxShadowFocus} + ${theme.focuses.boxShadowFocus} } .fi-wizard-navigation-item_inner-wrapper { diff --git a/src/core/Pagination/PageInput/PageInput.baseStyles.tsx b/src/core/Pagination/PageInput/PageInput.baseStyles.tsx index 942b24b16..097a3d7fd 100644 --- a/src/core/Pagination/PageInput/PageInput.baseStyles.tsx +++ b/src/core/Pagination/PageInput/PageInput.baseStyles.tsx @@ -33,7 +33,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` position: relative; box-shadow: ${theme.shadows.actionElementBoxShadow}; &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} top: -3px; bottom: -3px; right: -3px; @@ -47,7 +47,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` height: 40px; box-sizing: border-box; border: 1px solid ${theme.colors.depthDark3}; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; } &_input { @@ -82,7 +82,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` right: 0px; height: 40px; width: 40px; - border-radius: 0 ${theme.radius.basic} ${theme.radius.basic} 0; + border-radius: 0 ${theme.radiuses.basic} ${theme.radiuses.basic} 0; border: 0; &-icon { width: 18px; @@ -108,7 +108,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` &.fi-page-input--not-empty { & .fi-page-input_input-element-container { width: calc(100% - 40px); - border-radius: ${theme.radius.basic} 0 0 ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic} 0 0 ${theme.radiuses.basic}; border-right: 0; } @@ -118,7 +118,7 @@ export const baseStyles = (theme: SuomifiTheme) => css` background: ${theme.gradients.highlightBaseToHighlightDark1}; &:focus { &:after { - ${theme.focus.absoluteFocus} + ${theme.focuses.absoluteFocus} } } &:hover { diff --git a/src/core/Tooltip/TooltipContent/TooltipContent.baseStyles.tsx b/src/core/Tooltip/TooltipContent/TooltipContent.baseStyles.tsx index 7bc9ea0ea..6f14be76c 100644 --- a/src/core/Tooltip/TooltipContent/TooltipContent.baseStyles.tsx +++ b/src/core/Tooltip/TooltipContent/TooltipContent.baseStyles.tsx @@ -52,7 +52,7 @@ export const baseStyles = (arrowOffsetPx: number, theme: SuomifiTheme) => css` height: 40px; width: 40px; padding: 12px; - border-radius: ${theme.radius.basic}; + border-radius: ${theme.radiuses.basic}; & .fi-tooltip_close-button_icon { width: 16px; height: 16px; From 1ce0ed2fac95806a07d775842e76dddcf218f384 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Tue, 31 Jan 2023 15:59:10 +0200 Subject: [PATCH 4/8] Update tokens to 4.2.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5ffcb3ecc..225fd1ef7 100644 --- a/package.json +++ b/package.json @@ -163,7 +163,7 @@ "react-modal": "3.15.1", "react-popper": "2.3.0", "react-svg": "15.1.3", - "suomifi-design-tokens": "4.1.0", + "suomifi-design-tokens": "4.2.0", "suomifi-icons": "6.3.0" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index e2ffd4ab5..e5af94f6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12209,10 +12209,10 @@ stylelint@14.9.1: v8-compile-cache "^2.3.0" write-file-atomic "^4.0.1" -suomifi-design-tokens@4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-4.1.0.tgz#4336511b75f5baafef1800dba9e2e176ecfa2e35" - integrity sha512-1dNvMAC5y57DCa6uo7pCD8mrwqUbGxIHcNDz80FdFhG2gIG9Ys9qipZXhBBeRiJfA/60aGhWOlbg/gUGGm37Dg== +suomifi-design-tokens@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-4.2.0.tgz#2d5c0b0d458455b902a879fecfe8c69be08dbe07" + integrity sha512-nxiJtTgi0QkTx3MXSx+cFVrgFyVN0PsPSI1c1+8pz8DelP7koKD3q/MKDCN1v+37U6XZHgSX0/p/v49LQKzZlw== suomifi-icons@6.3.0: version "6.3.0" From cd38a7ce8f07dc1114210846e2fb1da116e82028 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Tue, 31 Jan 2023 15:59:20 +0200 Subject: [PATCH 5/8] Update snapshots --- .../Alert/__snapshots__/Alert.test.tsx.snap | 2 +- .../__snapshots__/Breadcrumb.test.tsx.snap | 2 +- .../Button/__snapshots__/Button.test.tsx.snap | 50 +++++++++---------- .../__snapshots__/Dropdown.test.tsx.snap | 10 ++-- .../__snapshots__/Expander.test.tsx.snap | 2 +- .../__snapshots__/ExpanderGroup.test.tsx.snap | 2 +- .../__snapshots__/Checkbox.test.tsx.snap | 2 +- .../__snapshots__/CheckboxGroup.test.tsx.snap | 2 +- .../__snapshots__/RadioButton.test.tsx.snap | 16 +++--- .../RadioButtonGroup.test.tsx.snap | 18 +++---- .../__snapshots__/SearchInput.test.tsx.snap | 2 +- .../__snapshots__/MultiSelect.test.tsx.snap | 10 ++-- .../__snapshots__/Textarea.test.tsx.snap | 2 +- .../__snapshots__/ExternalLink.test.tsx.snap | 2 +- .../Link/__snapshots__/Link.test.tsx.snap | 2 +- .../__snapshots__/RouterLink.test.tsx.snap | 2 +- .../__snapshots__/SkipLink.test.tsx.snap | 4 +- .../Modal/__snapshots__/Modal.test.tsx.snap | 12 ++--- .../__snapshots__/ModalContent.test.tsx.snap | 2 +- .../__snapshots__/ModalFooter.test.tsx.snap | 12 ++--- .../ServiceNavigation.test.tsx.snap | 6 +-- .../SideNavigation.test.tsx.snap | 4 +- .../WizardNavigation.test.tsx.snap | 4 +- .../__snapshots__/Notification.test.tsx.snap | 4 +- .../__snapshots__/Pagination.test.tsx.snap | 12 ++--- .../Toast/__snapshots__/Toast.test.tsx.snap | 2 +- .../__snapshots__/Tooltip.test.tsx.snap | 4 +- 27 files changed, 96 insertions(+), 96 deletions(-) diff --git a/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap b/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap index bf666c67b..fcf6e5b09 100644 --- a/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap +++ b/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap @@ -223,7 +223,7 @@ exports[`props children should match snapshot 1`] = ` } .c1.fi-alert .fi-alert_style-wrapper .fi-alert_close-button:active { - background: linear-gradient(-180deg,hsl(202,7%,80%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,80%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-alert .fi-alert_style-wrapper .fi-alert_close-button:hover { diff --git a/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 200648b20..6cd5bec64 100644 --- a/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -218,9 +218,9 @@ exports[`calling render with the same component on the same container does not r } .c7.fi-link:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c7.fi-link:hover, diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap index 8903b2b04..c3f8791ac 100644 --- a/src/core/Button/__snapshots__/Button.test.tsx.snap +++ b/src/core/Button/__snapshots__/Button.test.tsx.snap @@ -77,7 +77,7 @@ exports[`Button variant default should match snapshot 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -140,7 +140,7 @@ exports[`Button variant default should match snapshot 1`] = ` } .c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--inverted:active { @@ -165,7 +165,7 @@ exports[`Button variant default should match snapshot 1`] = ` } .c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary:active { @@ -194,7 +194,7 @@ exports[`Button variant default should match snapshot 1`] = ` } .c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary-noborder:active { @@ -224,7 +224,7 @@ exports[`Button variant default should match snapshot 1`] = ` } .c1.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--link:active { @@ -364,7 +364,7 @@ exports[`Button variant inverted should match snapshot 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -427,7 +427,7 @@ exports[`Button variant inverted should match snapshot 1`] = ` } .c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--inverted:active { @@ -452,7 +452,7 @@ exports[`Button variant inverted should match snapshot 1`] = ` } .c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary:active { @@ -481,7 +481,7 @@ exports[`Button variant inverted should match snapshot 1`] = ` } .c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary-noborder:active { @@ -511,7 +511,7 @@ exports[`Button variant inverted should match snapshot 1`] = ` } .c1.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--link:active { @@ -651,7 +651,7 @@ exports[`Button variant link match snapshot 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -714,7 +714,7 @@ exports[`Button variant link match snapshot 1`] = ` } .c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--inverted:active { @@ -739,7 +739,7 @@ exports[`Button variant link match snapshot 1`] = ` } .c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary:active { @@ -768,7 +768,7 @@ exports[`Button variant link match snapshot 1`] = ` } .c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary-noborder:active { @@ -798,7 +798,7 @@ exports[`Button variant link match snapshot 1`] = ` } .c1.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--link:active { @@ -938,7 +938,7 @@ exports[`Button variant secondary should match snapshot 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -1001,7 +1001,7 @@ exports[`Button variant secondary should match snapshot 1`] = ` } .c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--inverted:active { @@ -1026,7 +1026,7 @@ exports[`Button variant secondary should match snapshot 1`] = ` } .c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary:active { @@ -1055,7 +1055,7 @@ exports[`Button variant secondary should match snapshot 1`] = ` } .c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary-noborder:active { @@ -1085,7 +1085,7 @@ exports[`Button variant secondary should match snapshot 1`] = ` } .c1.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--link:active { @@ -1225,7 +1225,7 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -1288,7 +1288,7 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` } .c1.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--inverted:active { @@ -1313,7 +1313,7 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` } .c1.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary:active { @@ -1342,7 +1342,7 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` } .c1.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--secondary-noborder:active { @@ -1372,7 +1372,7 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` } .c1.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-button--link:active { diff --git a/src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap index 1960bf420..b6ee8384c 100644 --- a/src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap +++ b/src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -157,7 +157,7 @@ exports[`Basic dropdown should match snapshot 1`] = ` text-align: left; line-height: 1.5; background-color: hsl(0,0%,100%); - box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset; + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; cursor: pointer; } @@ -466,7 +466,7 @@ exports[`Controlled Dropdown should match snapshot 1`] = ` text-align: left; line-height: 1.5; background-color: hsl(0,0%,100%); - box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset; + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; cursor: pointer; } @@ -776,7 +776,7 @@ exports[`Dropdown as action menu should match snapshot 1`] = ` text-align: left; line-height: 1.5; background-color: hsl(0,0%,100%); - box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset; + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; cursor: pointer; } @@ -1085,7 +1085,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = ` text-align: left; line-height: 1.5; background-color: hsl(0,0%,100%); - box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset; + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; cursor: pointer; } @@ -1406,7 +1406,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = ` text-align: left; line-height: 1.5; background-color: hsl(0,0%,100%); - box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset; + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; cursor: pointer; } diff --git a/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap b/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap index fda80b704..c8e178e53 100644 --- a/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap +++ b/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap @@ -160,7 +160,7 @@ exports[`Basic expander shoud match snapshot 1`] = ` position: relative; padding: 0; border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(41,41,41,0.14),0 1px 5px 0 rgba(41,41,41,0.12); + box-shadow: 0 1px 2px 0 hsla(0,0%,16%,0.14),0 1px 5px 0 hsla(0,0%,16%,0.12); width: 100%; max-width: 100%; } diff --git a/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap b/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap index e709757d9..ad9e8a185 100644 --- a/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap +++ b/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap @@ -291,7 +291,7 @@ exports[`Basic expander group should match snapshot 1`] = ` position: relative; padding: 0; border-radius: 2px; - box-shadow: 0 1px 2px 0 rgba(41,41,41,0.14),0 1px 5px 0 rgba(41,41,41,0.12); + box-shadow: 0 1px 2px 0 hsla(0,0%,16%,0.14),0 1px 5px 0 hsla(0,0%,16%,0.12); width: 100%; max-width: 100%; } diff --git a/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 23a8a5bee..c0d7be2ae 100644 --- a/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -191,9 +191,9 @@ exports[`props children has matching snapshot 1`] = ` } .c1:focus-within .fi-checkbox_label::before { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c1 .fi-checkbox_input { diff --git a/src/core/Form/Checkbox/__snapshots__/CheckboxGroup.test.tsx.snap b/src/core/Form/Checkbox/__snapshots__/CheckboxGroup.test.tsx.snap index 227d8254d..cd4657e6e 100644 --- a/src/core/Form/Checkbox/__snapshots__/CheckboxGroup.test.tsx.snap +++ b/src/core/Form/Checkbox/__snapshots__/CheckboxGroup.test.tsx.snap @@ -325,9 +325,9 @@ exports[`default, with only required props should match snapshot 1`] = ` } .c7:focus-within .fi-checkbox_label::before { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c7 .fi-checkbox_input { diff --git a/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap index ad8778276..02ceab52f 100644 --- a/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap +++ b/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap @@ -206,9 +206,9 @@ exports[`children should match snapshot 1`] = ` } .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -520,9 +520,9 @@ exports[`className should match snapshot 1`] = ` } .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -834,9 +834,9 @@ exports[`disabled should match snapshot 1`] = ` } .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -1170,9 +1170,9 @@ exports[`hintText should match snapshot 1`] = ` } .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -1491,9 +1491,9 @@ exports[`id should match snapshot 1`] = ` } .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -1805,9 +1805,9 @@ exports[`name should match snapshot 1`] = ` } .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -2120,9 +2120,9 @@ exports[`value should match snapshot 1`] = ` } .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -2434,9 +2434,9 @@ exports[`variant should match snapshot 1`] = ` } .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } diff --git a/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap index 4292a89b1..6405c5119 100644 --- a/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap +++ b/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap @@ -372,9 +372,9 @@ exports[`default, with only required props should match snapshot 1`] = ` } .c7.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -976,9 +976,9 @@ exports[`props className should match snapshot 1`] = ` } .c7.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -1580,9 +1580,9 @@ exports[`props defaultValue should match snapshot 1`] = ` } .c7.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -2206,9 +2206,9 @@ exports[`props hintText should match snapshot 1`] = ` } .c8.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -2815,9 +2815,9 @@ exports[`props id should match snapshot 1`] = ` } .c7.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -3419,9 +3419,9 @@ exports[`props label should match snapshot 1`] = ` } .c7.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -4035,9 +4035,9 @@ exports[`props labelMode should match snapshot 1`] = ` } .c7.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -4639,9 +4639,9 @@ exports[`props name should match snapshot 1`] = ` } .c7.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } @@ -5243,9 +5243,9 @@ exports[`props value should match snapshot 1`] = ` } .c7.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_icon_wrapper { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; border-radius: 50%; } diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap index b476fa2c9..e799673be 100644 --- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap +++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap @@ -387,7 +387,7 @@ exports[`snapshot should have matching default structure 1`] = ` .c1 .fi-search-input_input-element-container:focus-within { position: relative; - box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset; + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; } .c1 .fi-search-input_input-element-container:focus-within:after { diff --git a/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap b/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap index 61d036ce5..c13a5a2d5 100644 --- a/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap +++ b/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap @@ -621,7 +621,7 @@ exports[`has matching snapshot 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -684,7 +684,7 @@ exports[`has matching snapshot 1`] = ` } .c14.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c14.fi-button--inverted:active { @@ -709,7 +709,7 @@ exports[`has matching snapshot 1`] = ` } .c14.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c14.fi-button--secondary:active { @@ -738,7 +738,7 @@ exports[`has matching snapshot 1`] = ` } .c14.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c14.fi-button--secondary-noborder:active { @@ -768,7 +768,7 @@ exports[`has matching snapshot 1`] = ` } .c14.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c14.fi-button--link:active { diff --git a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap index 3084b2e03..263d19e1f 100644 --- a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap +++ b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap @@ -241,7 +241,7 @@ exports[`snapshot default structure should match snapshot 1`] = ` resize: vertical; border-radius: 2px; border: 1px solid hsl(201,7%,58%); - box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset; + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; padding: 8px 14px 13px 10px; font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; font-size: 16px; diff --git a/src/core/Link/ExternalLink/__snapshots__/ExternalLink.test.tsx.snap b/src/core/Link/ExternalLink/__snapshots__/ExternalLink.test.tsx.snap index 86139e140..20c4b4724 100644 --- a/src/core/Link/ExternalLink/__snapshots__/ExternalLink.test.tsx.snap +++ b/src/core/Link/ExternalLink/__snapshots__/ExternalLink.test.tsx.snap @@ -140,9 +140,9 @@ exports[`calling render with the same component on the same container does not r } .c1.fi-link:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c1.fi-link:hover, diff --git a/src/core/Link/Link/__snapshots__/Link.test.tsx.snap b/src/core/Link/Link/__snapshots__/Link.test.tsx.snap index ed84692d7..5c70f733c 100644 --- a/src/core/Link/Link/__snapshots__/Link.test.tsx.snap +++ b/src/core/Link/Link/__snapshots__/Link.test.tsx.snap @@ -75,9 +75,9 @@ exports[`calling render with the same component on the same container does not r } .c1.fi-link:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c1.fi-link:hover, diff --git a/src/core/Link/RouterLink/__snapshots__/RouterLink.test.tsx.snap b/src/core/Link/RouterLink/__snapshots__/RouterLink.test.tsx.snap index a93e0c870..a50f8c38a 100644 --- a/src/core/Link/RouterLink/__snapshots__/RouterLink.test.tsx.snap +++ b/src/core/Link/RouterLink/__snapshots__/RouterLink.test.tsx.snap @@ -75,9 +75,9 @@ exports[`calling render with the same component on the same container does not r } .c1.fi-link--router:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c1.fi-link--router:hover, diff --git a/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap b/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap index 1da516986..4feac0ace 100644 --- a/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap +++ b/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap @@ -75,9 +75,9 @@ exports[`should match snapshot 1`] = ` } .c1.fi-link:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c1.fi-link:hover, @@ -143,9 +143,9 @@ exports[`should match snapshot 1`] = ` } .c2.fi-link:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c2.fi-link:hover, diff --git a/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap b/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap index 805fa0208..cf5cb072a 100644 --- a/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap +++ b/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap @@ -72,9 +72,9 @@ exports[`Basic modal should match snapshot 1`] = ` } .c0 .fi-modal:focus-visible { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c0 .fi-modal--no-scroll { @@ -644,7 +644,7 @@ exports[`Basic modal should match snapshot 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -707,7 +707,7 @@ exports[`Basic modal should match snapshot 1`] = ` } .c9.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c9.fi-button--inverted:active { @@ -732,7 +732,7 @@ exports[`Basic modal should match snapshot 1`] = ` } .c9.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c9.fi-button--secondary:active { @@ -761,7 +761,7 @@ exports[`Basic modal should match snapshot 1`] = ` } .c9.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c9.fi-button--secondary-noborder:active { @@ -791,7 +791,7 @@ exports[`Basic modal should match snapshot 1`] = ` } .c9.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c9.fi-button--link:active { diff --git a/src/core/Modal/ModalContent/__snapshots__/ModalContent.test.tsx.snap b/src/core/Modal/ModalContent/__snapshots__/ModalContent.test.tsx.snap index 6a3da419f..aa24ce492 100644 --- a/src/core/Modal/ModalContent/__snapshots__/ModalContent.test.tsx.snap +++ b/src/core/Modal/ModalContent/__snapshots__/ModalContent.test.tsx.snap @@ -159,9 +159,9 @@ exports[`Basic ModalContent should match snapshot 1`] = ` } .c0 .fi-modal:focus-visible { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c0 .fi-modal--no-scroll { diff --git a/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap b/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap index 7324889e4..cb92a8cc7 100644 --- a/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap +++ b/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap @@ -72,9 +72,9 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` } .c0 .fi-modal:focus-visible { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c0 .fi-modal--no-scroll { @@ -239,7 +239,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -302,7 +302,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` } .c4.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c4.fi-button--inverted:active { @@ -327,7 +327,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` } .c4.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c4.fi-button--secondary:active { @@ -356,7 +356,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` } .c4.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c4.fi-button--secondary-noborder:active { @@ -386,7 +386,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` } .c4.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c4.fi-button--link:active { diff --git a/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap b/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap index 478f8746d..93cd4dc38 100644 --- a/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap +++ b/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap @@ -323,9 +323,9 @@ exports[`should match snapshot 1`] = ` } .c5.fi-service-navigation-item:focus-within { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; z-index: 9999; } @@ -489,9 +489,9 @@ exports[`should match snapshot 1`] = ` } .c10.fi-link:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c10.fi-link:hover, @@ -563,9 +563,9 @@ exports[`should match snapshot 1`] = ` } .c7.fi-link--router:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c7.fi-link--router:hover, diff --git a/src/core/Navigation/SideNavigation/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/src/core/Navigation/SideNavigation/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap index cdc8d8a15..428b2955d 100644 --- a/src/core/Navigation/SideNavigation/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap +++ b/src/core/Navigation/SideNavigation/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap @@ -608,9 +608,9 @@ exports[`calling render with the same component on the same container does not r } .c11.fi-link:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c11.fi-link:hover, @@ -682,9 +682,9 @@ exports[`calling render with the same component on the same container does not r } .c9.fi-link--router:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c9.fi-link--router:hover, diff --git a/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap b/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap index 62f2c300c..4690f7af1 100644 --- a/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap +++ b/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap @@ -336,9 +336,9 @@ exports[`calling render with the same component on the same container does not r } .c5.fi-wizard-navigation-item:focus-within { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c5.fi-wizard-navigation-item .fi-wizard-navigation-item_inner-wrapper { @@ -784,9 +784,9 @@ exports[`calling render with the same component on the same container does not r } .c8.fi-link--router:focus { - outline: 0; border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; } .c8.fi-link--router:hover, diff --git a/src/core/Notification/__snapshots__/Notification.test.tsx.snap b/src/core/Notification/__snapshots__/Notification.test.tsx.snap index 2bbb193ad..4eed7061c 100644 --- a/src/core/Notification/__snapshots__/Notification.test.tsx.snap +++ b/src/core/Notification/__snapshots__/Notification.test.tsx.snap @@ -439,7 +439,7 @@ exports[`props children should match snapshot 1`] = ` line-height: 1.5; font-weight: 400; width: 100%; - box-shadow: 0px 4px 8px 0px rgba(41,41,41,0.14); + box-shadow: 0px 4px 8px 0px hsla(0,0%,16%,0.14); border-radius: 4px; padding-bottom: 10px; } @@ -598,7 +598,7 @@ exports[`props children should match snapshot 1`] = ` } .c1.fi-notification .fi-notification_close-button:active { - background: linear-gradient(-180deg,hsl(202,7%,80%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,80%) 0%,hsla(0,0%,100%,0) 100%); } .c1.fi-notification .fi-notification_close-button:hover { diff --git a/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap index 3815fced2..bf34f5bed 100644 --- a/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -350,7 +350,7 @@ exports[`snapshot should have matching default structure 1`] = ` .c8 .fi-page-input_input-element-container:focus-within { position: relative; - box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset; + box-shadow: 0 1px 2px 0 hsla(214,100%,24%,0.1) inset; } .c8 .fi-page-input_input-element-container:focus-within:after { @@ -544,7 +544,7 @@ exports[`snapshot should have matching default structure 1`] = ` background: linear-gradient(0deg,hsl(212,63%,37%) 0%,hsl(212,63%,45%) 100%); border-radius: 2px; text-align: center; - text-shadow: 0 1px 1px rgba(0,53,122,0.5); + text-shadow: 0 1px 1px hsla(214,100%,24%,0.5); cursor: pointer; } @@ -607,7 +607,7 @@ exports[`snapshot should have matching default structure 1`] = ` } .c6.fi-button--inverted:hover { - background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%); } .c6.fi-button--inverted:active { @@ -632,7 +632,7 @@ exports[`snapshot should have matching default structure 1`] = ` } .c6.fi-button--secondary:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c6.fi-button--secondary:active { @@ -661,7 +661,7 @@ exports[`snapshot should have matching default structure 1`] = ` } .c6.fi-button--secondary-noborder:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c6.fi-button--secondary-noborder:active { @@ -691,7 +691,7 @@ exports[`snapshot should have matching default structure 1`] = ` } .c6.fi-button--link:hover { - background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,hsla(0,0%,100%,0) 100%); } .c6.fi-button--link:active { diff --git a/src/core/Toast/__snapshots__/Toast.test.tsx.snap b/src/core/Toast/__snapshots__/Toast.test.tsx.snap index 2107c4d12..88461ad02 100644 --- a/src/core/Toast/__snapshots__/Toast.test.tsx.snap +++ b/src/core/Toast/__snapshots__/Toast.test.tsx.snap @@ -100,7 +100,7 @@ exports[`props children should match snapshot 1`] = ` font-weight: 400; border-top: 4px solid hsl(166,90%,34%); width: 100%; - box-shadow: 0px 4px 8px 0px rgba(41,41,41,0.14); + box-shadow: 0px 4px 8px 0px hsla(0,0%,16%,0.14); border-radius: 4px; overflow: hidden; } diff --git a/src/core/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/core/Tooltip/__snapshots__/Tooltip.test.tsx.snap index 11d6f17c9..9b93b692c 100644 --- a/src/core/Tooltip/__snapshots__/Tooltip.test.tsx.snap +++ b/src/core/Tooltip/__snapshots__/Tooltip.test.tsx.snap @@ -122,7 +122,7 @@ exports[`Basic tooltip should match snapshot 1`] = ` border-radius: 2px; background-color: hsl(212,63%,98%); padding: 20px 43px 20px 20px; - box-shadow: 0 2px 3px 0 rgba(41,41,41,0.2); + box-shadow: 0 2px 3px 0 hsla(0,0%,16%,0.2); } .c4.fi-tooltip_content:before, @@ -172,7 +172,7 @@ exports[`Basic tooltip should match snapshot 1`] = ` } .c4.fi-tooltip_content .fi-tooltip_close-button:active { - background: linear-gradient(-180deg,hsl(202,7%,80%) 0%,rgba(255,255,255,0) 100%); + background: linear-gradient(-180deg,hsl(202,7%,80%) 0%,hsla(0,0%,100%,0) 100%); } .c4.fi-tooltip_content .fi-tooltip_close-button:focus-visible { From 1e7f62cfdbe6074b3b1b588b8225f17a78755ce3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Wed, 1 Feb 2023 15:40:24 +0200 Subject: [PATCH 6/8] Update tokens to 5.0.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 225fd1ef7..907e87627 100644 --- a/package.json +++ b/package.json @@ -163,7 +163,7 @@ "react-modal": "3.15.1", "react-popper": "2.3.0", "react-svg": "15.1.3", - "suomifi-design-tokens": "4.2.0", + "suomifi-design-tokens": "5.0.0", "suomifi-icons": "6.3.0" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index e5af94f6f..ce900f85a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12209,10 +12209,10 @@ stylelint@14.9.1: v8-compile-cache "^2.3.0" write-file-atomic "^4.0.1" -suomifi-design-tokens@4.2.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-4.2.0.tgz#2d5c0b0d458455b902a879fecfe8c69be08dbe07" - integrity sha512-nxiJtTgi0QkTx3MXSx+cFVrgFyVN0PsPSI1c1+8pz8DelP7koKD3q/MKDCN1v+37U6XZHgSX0/p/v49LQKzZlw== +suomifi-design-tokens@5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-5.0.0.tgz#773de7faeb3136387587bbc3151e65b6201a77ad" + integrity sha512-hdDFKkiXNV0n1WvozR3ELTmMUoRaG8Wn6Jsg2SM5HzhwDx5MyBbDuuYGujuepCCsI6bp1P9c6TIb22H6w1/szA== suomifi-icons@6.3.0: version "6.3.0" From 0b2f4532c2e4945298c8570785420083e0b58636 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Wed, 1 Feb 2023 15:44:46 +0200 Subject: [PATCH 7/8] Update snapshots --- .../Alert/__snapshots__/Alert.test.tsx.snap | 4 +- .../__snapshots__/InlineAlert.test.tsx.snap | 2 +- .../Block/__snapshots__/Block.test.tsx.snap | 2 +- .../__snapshots__/Breadcrumb.test.tsx.snap | 6 +- .../Button/__snapshots__/Button.test.tsx.snap | 20 +++---- .../Chip/__snapshots__/Chip.test.tsx.snap | 6 +- .../__snapshots__/StaticChip.test.tsx.snap | 6 +- .../__snapshots__/Dropdown.test.tsx.snap | 40 ++++++------- .../__snapshots__/Expander.test.tsx.snap | 10 ++-- .../ExpanderContent.test.tsx.snap | 2 +- .../__snapshots__/ExpanderGroup.test.tsx.snap | 14 ++--- .../__snapshots__/ExpanderTitle.test.tsx.snap | 4 +- .../ExpanderTitleButton.test.tsx.snap | 4 +- .../__snapshots__/Checkbox.test.tsx.snap | 4 +- .../__snapshots__/CheckboxGroup.test.tsx.snap | 8 +-- .../__snapshots__/FilterInput.test.tsx.snap | 6 +- .../__snapshots__/RadioButton.test.tsx.snap | 18 +++--- .../RadioButtonGroup.test.tsx.snap | 56 +++++++++---------- .../__snapshots__/SearchInput.test.tsx.snap | 8 +-- .../__snapshots__/MultiSelect.test.tsx.snap | 14 ++--- .../__snapshots__/SingleSelect.test.tsx.snap | 10 ++-- .../__snapshots__/TextInput.test.tsx.snap | 18 +++--- .../__snapshots__/Textarea.test.tsx.snap | 8 +-- .../__snapshots__/ToggleButton.test.tsx.snap | 6 +- .../__snapshots__/ToggleInput.test.tsx.snap | 8 +-- .../__snapshots__/Heading.test.tsx.snap | 4 +- .../__snapshots__/LanguageMenu.test.tsx.snap | 4 +- .../__snapshots__/SkipLink.test.tsx.snap | 2 +- .../LoadingSpinner.test.tsx.snap | 2 +- .../Modal/__snapshots__/Modal.test.tsx.snap | 14 ++--- .../__snapshots__/ModalContent.test.tsx.snap | 10 ++-- .../__snapshots__/ModalFooter.test.tsx.snap | 8 +-- .../ServiceNavigation.test.tsx.snap | 12 ++-- .../WizardNavigation.test.tsx.snap | 8 +-- .../__snapshots__/Notification.test.tsx.snap | 10 ++-- .../__snapshots__/Pagination.test.tsx.snap | 14 ++--- .../__snapshots__/Paragraph.test.tsx.snap | 2 +- .../Text/__snapshots__/Text.test.tsx.snap | 6 +- .../Toast/__snapshots__/Toast.test.tsx.snap | 4 +- .../__snapshots__/Tooltip.test.tsx.snap | 6 +- 40 files changed, 195 insertions(+), 195 deletions(-) diff --git a/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap b/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap index fcf6e5b09..046a8a8ff 100644 --- a/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap +++ b/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap @@ -137,7 +137,7 @@ exports[`props children should match snapshot 1`] = ` } .c1.fi-alert { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -227,7 +227,7 @@ exports[`props children should match snapshot 1`] = ` } .c1.fi-alert .fi-alert_style-wrapper .fi-alert_close-button:hover { - border-color: hsl(0,0%,16%); + border-color: hsl(0,0%,13%); } .c1.fi-alert .fi-alert_style-wrapper .fi-alert_close-button .fi-icon { diff --git a/src/core/Alert/InlineAlert/__snapshots__/InlineAlert.test.tsx.snap b/src/core/Alert/InlineAlert/__snapshots__/InlineAlert.test.tsx.snap index 45c83769c..b3c725e31 100644 --- a/src/core/Alert/InlineAlert/__snapshots__/InlineAlert.test.tsx.snap +++ b/src/core/Alert/InlineAlert/__snapshots__/InlineAlert.test.tsx.snap @@ -60,7 +60,7 @@ exports[`children should match snapshot 1`] = ` } .c1.fi-inline-alert { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Block/__snapshots__/Block.test.tsx.snap b/src/core/Block/__snapshots__/Block.test.tsx.snap index 2a506ba0e..6c1ae64b9 100644 --- a/src/core/Block/__snapshots__/Block.test.tsx.snap +++ b/src/core/Block/__snapshots__/Block.test.tsx.snap @@ -31,7 +31,7 @@ exports[`calling render with the same component on the same container does not r } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 6cd5bec64..48059982a 100644 --- a/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -151,7 +151,7 @@ exports[`calling render with the same component on the same container does not r } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); display: block; -webkit-letter-spacing: 0; -moz-letter-spacing: 0; @@ -170,14 +170,14 @@ exports[`calling render with the same component on the same container does not r } .c1 .fi-breadcrumb_list { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); list-style: none; margin: 0; padding: 0; } .c1 .fi-breadcrumb_item { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); list-style: none; float: left; } diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap index c3f8791ac..f054f82b5 100644 --- a/src/core/Button/__snapshots__/Button.test.tsx.snap +++ b/src/core/Button/__snapshots__/Button.test.tsx.snap @@ -55,7 +55,7 @@ exports[`Button variant default should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -113,7 +113,7 @@ exports[`Button variant default should match snapshot 1`] = ` .c1.fi-button--disabled, .c1[disabled], .c1:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; @@ -342,7 +342,7 @@ exports[`Button variant inverted should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -400,7 +400,7 @@ exports[`Button variant inverted should match snapshot 1`] = ` .c1.fi-button--disabled, .c1[disabled], .c1:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; @@ -629,7 +629,7 @@ exports[`Button variant link match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -687,7 +687,7 @@ exports[`Button variant link match snapshot 1`] = ` .c1.fi-button--disabled, .c1[disabled], .c1:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; @@ -916,7 +916,7 @@ exports[`Button variant secondary should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -974,7 +974,7 @@ exports[`Button variant secondary should match snapshot 1`] = ` .c1.fi-button--disabled, .c1[disabled], .c1:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; @@ -1203,7 +1203,7 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1261,7 +1261,7 @@ exports[`Button variant secondaryNoBorder should match snapshot 1`] = ` .c1.fi-button--disabled, .c1[disabled], .c1:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; diff --git a/src/core/Chip/Chip/__snapshots__/Chip.test.tsx.snap b/src/core/Chip/Chip/__snapshots__/Chip.test.tsx.snap index d799d3adf..5ab1bb924 100644 --- a/src/core/Chip/Chip/__snapshots__/Chip.test.tsx.snap +++ b/src/core/Chip/Chip/__snapshots__/Chip.test.tsx.snap @@ -84,7 +84,7 @@ exports[`children should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -287,7 +287,7 @@ exports[`classnames should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -486,7 +486,7 @@ exports[`disabled should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Chip/StaticChip/__snapshots__/StaticChip.test.tsx.snap b/src/core/Chip/StaticChip/__snapshots__/StaticChip.test.tsx.snap index 5cf3c6f2e..51a7779aa 100644 --- a/src/core/Chip/StaticChip/__snapshots__/StaticChip.test.tsx.snap +++ b/src/core/Chip/StaticChip/__snapshots__/StaticChip.test.tsx.snap @@ -31,7 +31,7 @@ exports[`children should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -143,7 +143,7 @@ exports[`classnames should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -251,7 +251,7 @@ exports[`disabled should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap index b6ee8384c..c7e363e08 100644 --- a/src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap +++ b/src/core/Dropdown/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -104,7 +104,7 @@ exports[`Basic dropdown should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -127,7 +127,7 @@ exports[`Basic dropdown should match snapshot 1`] = ` } .c1 [data-reach-listbox-button].fi-dropdown_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -210,7 +210,7 @@ exports[`Basic dropdown should match snapshot 1`] = ` } .c1[data-reach-listbox-popover].fi-dropdown_popover { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; font-size: 16px; line-height: 1.5; @@ -244,7 +244,7 @@ exports[`Basic dropdown should match snapshot 1`] = ` } .c1.fi-dropdown--noSelectedStyles [data-reach-listbox-option][data-current-nav].fi-dropdown_item { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); background-image: none; background-color: hsl(212,63%,95%); border: 0; @@ -413,7 +413,7 @@ exports[`Controlled Dropdown should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -436,7 +436,7 @@ exports[`Controlled Dropdown should match snapshot 1`] = ` } .c1 [data-reach-listbox-button].fi-dropdown_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -519,7 +519,7 @@ exports[`Controlled Dropdown should match snapshot 1`] = ` } .c1[data-reach-listbox-popover].fi-dropdown_popover { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; font-size: 16px; line-height: 1.5; @@ -553,7 +553,7 @@ exports[`Controlled Dropdown should match snapshot 1`] = ` } .c1.fi-dropdown--noSelectedStyles [data-reach-listbox-option][data-current-nav].fi-dropdown_item { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); background-image: none; background-color: hsl(212,63%,95%); border: 0; @@ -723,7 +723,7 @@ exports[`Dropdown as action menu should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -746,7 +746,7 @@ exports[`Dropdown as action menu should match snapshot 1`] = ` } .c1 [data-reach-listbox-button].fi-dropdown_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -829,7 +829,7 @@ exports[`Dropdown as action menu should match snapshot 1`] = ` } .c1[data-reach-listbox-popover].fi-dropdown_popover { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; font-size: 16px; line-height: 1.5; @@ -863,7 +863,7 @@ exports[`Dropdown as action menu should match snapshot 1`] = ` } .c1.fi-dropdown--noSelectedStyles [data-reach-listbox-option][data-current-nav].fi-dropdown_item { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); background-image: none; background-color: hsl(212,63%,95%); border: 0; @@ -1032,7 +1032,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -1055,7 +1055,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = ` } .c1 [data-reach-listbox-button].fi-dropdown_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1138,7 +1138,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = ` } .c1[data-reach-listbox-popover].fi-dropdown_popover { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; font-size: 16px; line-height: 1.5; @@ -1172,7 +1172,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = ` } .c1.fi-dropdown--noSelectedStyles [data-reach-listbox-option][data-current-nav].fi-dropdown_item { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); background-image: none; background-color: hsl(212,63%,95%); border: 0; @@ -1353,7 +1353,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -1376,7 +1376,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = ` } .c1 [data-reach-listbox-button].fi-dropdown_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1459,7 +1459,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = ` } .c1[data-reach-listbox-popover].fi-dropdown_popover { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; font-size: 16px; line-height: 1.5; @@ -1493,7 +1493,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = ` } .c1.fi-dropdown--noSelectedStyles [data-reach-listbox-option][data-current-nav].fi-dropdown_item { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); background-image: none; background-color: hsl(212,63%,95%); border: 0; diff --git a/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap b/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap index c8e178e53..70674951b 100644 --- a/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap +++ b/src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap @@ -142,7 +142,7 @@ exports[`Basic expander shoud match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -160,7 +160,7 @@ exports[`Basic expander shoud match snapshot 1`] = ` position: relative; padding: 0; border-radius: 2px; - box-shadow: 0 1px 2px 0 hsla(0,0%,16%,0.14),0 1px 5px 0 hsla(0,0%,16%,0.12); + box-shadow: 0 1px 2px 0 hsla(0,0%,13%,0.14),0 1px 5px 0 hsla(0,0%,13%,0.12); width: 100%; max-width: 100%; } @@ -175,7 +175,7 @@ exports[`Basic expander shoud match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -256,7 +256,7 @@ exports[`Basic expander shoud match snapshot 1`] = ` } .c3 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); position: relative; width: 100%; max-width: 100%; @@ -276,7 +276,7 @@ exports[`Basic expander shoud match snapshot 1`] = ` } .c3 .fi-expander_title-button_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap b/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap index b6ac56998..c14fb247f 100644 --- a/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap +++ b/src/core/Expander/ExpanderContent/__snapshots__/ExpanderContent.test.tsx.snap @@ -31,7 +31,7 @@ exports[`Basic ExpanderContent shoud match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap b/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap index ad9e8a185..20618139b 100644 --- a/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap +++ b/src/core/Expander/ExpanderGroup/__snapshots__/ExpanderGroup.test.tsx.snap @@ -154,7 +154,7 @@ exports[`Basic expander group should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); width: 100%; max-width: 100%; } @@ -214,7 +214,7 @@ exports[`Basic expander group should match snapshot 1`] = ` } .c1 > .fi-expander-group_all-button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -273,7 +273,7 @@ exports[`Basic expander group should match snapshot 1`] = ` } .c6 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -291,7 +291,7 @@ exports[`Basic expander group should match snapshot 1`] = ` position: relative; padding: 0; border-radius: 2px; - box-shadow: 0 1px 2px 0 hsla(0,0%,16%,0.14),0 1px 5px 0 hsla(0,0%,16%,0.12); + box-shadow: 0 1px 2px 0 hsla(0,0%,13%,0.14),0 1px 5px 0 hsla(0,0%,13%,0.12); width: 100%; max-width: 100%; } @@ -306,7 +306,7 @@ exports[`Basic expander group should match snapshot 1`] = ` } .c9 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -387,7 +387,7 @@ exports[`Basic expander group should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); position: relative; width: 100%; max-width: 100%; @@ -407,7 +407,7 @@ exports[`Basic expander group should match snapshot 1`] = ` } .c7 .fi-expander_title-button_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Expander/ExpanderTitle/__snapshots__/ExpanderTitle.test.tsx.snap b/src/core/Expander/ExpanderTitle/__snapshots__/ExpanderTitle.test.tsx.snap index 48249758b..31c6d4f1e 100644 --- a/src/core/Expander/ExpanderTitle/__snapshots__/ExpanderTitle.test.tsx.snap +++ b/src/core/Expander/ExpanderTitle/__snapshots__/ExpanderTitle.test.tsx.snap @@ -149,7 +149,7 @@ exports[`Basic ExpanderTitle shoud match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -189,7 +189,7 @@ exports[`Basic ExpanderTitle shoud match snapshot 1`] = ` } .c1 .fi-expander_title-button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Expander/ExpanderTitleButton/__snapshots__/ExpanderTitleButton.test.tsx.snap b/src/core/Expander/ExpanderTitleButton/__snapshots__/ExpanderTitleButton.test.tsx.snap index d231e49df..ee9c73844 100644 --- a/src/core/Expander/ExpanderTitleButton/__snapshots__/ExpanderTitleButton.test.tsx.snap +++ b/src/core/Expander/ExpanderTitleButton/__snapshots__/ExpanderTitleButton.test.tsx.snap @@ -137,7 +137,7 @@ exports[`Basic ExpanderTitleButton shoud match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); position: relative; width: 100%; max-width: 100%; @@ -157,7 +157,7 @@ exports[`Basic ExpanderTitleButton shoud match snapshot 1`] = ` } .c1 .fi-expander_title-button_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap index c0d7be2ae..4054ef5d6 100644 --- a/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -131,7 +131,7 @@ exports[`props children has matching snapshot 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -145,7 +145,7 @@ exports[`props children has matching snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/Checkbox/__snapshots__/CheckboxGroup.test.tsx.snap b/src/core/Form/Checkbox/__snapshots__/CheckboxGroup.test.tsx.snap index cd4657e6e..4400a4f91 100644 --- a/src/core/Form/Checkbox/__snapshots__/CheckboxGroup.test.tsx.snap +++ b/src/core/Form/Checkbox/__snapshots__/CheckboxGroup.test.tsx.snap @@ -210,7 +210,7 @@ exports[`default, with only required props should match snapshot 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -239,7 +239,7 @@ exports[`default, with only required props should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -254,7 +254,7 @@ exports[`default, with only required props should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c1 .fi-checkbox-group_label--visible { @@ -279,7 +279,7 @@ exports[`default, with only required props should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/FilterInput/__snapshots__/FilterInput.test.tsx.snap b/src/core/Form/FilterInput/__snapshots__/FilterInput.test.tsx.snap index d374ddb01..3f328a2cc 100644 --- a/src/core/Form/FilterInput/__snapshots__/FilterInput.test.tsx.snap +++ b/src/core/Form/FilterInput/__snapshots__/FilterInput.test.tsx.snap @@ -137,7 +137,7 @@ exports[`snapshot matches 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c3.fi-label .fi-label_label-span .fi-label_optional-text { @@ -165,7 +165,7 @@ exports[`snapshot matches 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -284,7 +284,7 @@ exports[`snapshot matches 1`] = ` } .c1 .fi-filter-input_input { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap index 02ceab52f..c4afab086 100644 --- a/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap +++ b/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap @@ -134,7 +134,7 @@ exports[`children should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -448,7 +448,7 @@ exports[`className should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -762,7 +762,7 @@ exports[`disabled should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1061,7 +1061,7 @@ exports[`hintText should match snapshot 1`] = ` } .c6 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1098,7 +1098,7 @@ exports[`hintText should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1419,7 +1419,7 @@ exports[`id should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1733,7 +1733,7 @@ exports[`name should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -2048,7 +2048,7 @@ exports[`value should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -2362,7 +2362,7 @@ exports[`variant should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap index 6405c5119..6391a1e6f 100644 --- a/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap +++ b/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap @@ -228,7 +228,7 @@ exports[`default, with only required props should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -243,7 +243,7 @@ exports[`default, with only required props should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -300,7 +300,7 @@ exports[`default, with only required props should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -832,7 +832,7 @@ exports[`props className should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -847,7 +847,7 @@ exports[`props className should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -904,7 +904,7 @@ exports[`props className should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1436,7 +1436,7 @@ exports[`props defaultValue should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -1451,7 +1451,7 @@ exports[`props defaultValue should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -1508,7 +1508,7 @@ exports[`props defaultValue should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -2010,7 +2010,7 @@ exports[`props hintText should match snapshot 1`] = ` } .c6 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -2062,7 +2062,7 @@ exports[`props hintText should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -2077,7 +2077,7 @@ exports[`props hintText should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -2134,7 +2134,7 @@ exports[`props hintText should match snapshot 1`] = ` } .c8 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -2671,7 +2671,7 @@ exports[`props id should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -2686,7 +2686,7 @@ exports[`props id should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -2743,7 +2743,7 @@ exports[`props id should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -3275,7 +3275,7 @@ exports[`props label should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -3290,7 +3290,7 @@ exports[`props label should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -3347,7 +3347,7 @@ exports[`props label should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -3891,7 +3891,7 @@ exports[`props labelMode should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -3906,7 +3906,7 @@ exports[`props labelMode should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -3963,7 +3963,7 @@ exports[`props labelMode should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -4495,7 +4495,7 @@ exports[`props name should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -4510,7 +4510,7 @@ exports[`props name should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -4567,7 +4567,7 @@ exports[`props name should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -5099,7 +5099,7 @@ exports[`props value should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -5114,7 +5114,7 @@ exports[`props value should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -5171,7 +5171,7 @@ exports[`props value should match snapshot 1`] = ` } .c7 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap index e799673be..054f17027 100644 --- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap +++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap @@ -200,7 +200,7 @@ exports[`snapshot should have matching default structure 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -229,7 +229,7 @@ exports[`snapshot should have matching default structure 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -366,7 +366,7 @@ exports[`snapshot should have matching default structure 1`] = ` .c1 .fi-search-input_input-element-container { background-color: hsl(0,0%,100%); - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); width: 100%; height: 40px; box-sizing: border-box; @@ -415,7 +415,7 @@ exports[`snapshot should have matching default structure 1`] = ` } .c1 .fi-search-input_input { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap b/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap index c13a5a2d5..861b08d19 100644 --- a/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap +++ b/src/core/Form/Select/MultiSelect/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap @@ -202,7 +202,7 @@ exports[`has matching snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -230,7 +230,7 @@ exports[`has matching snapshot 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -349,7 +349,7 @@ exports[`has matching snapshot 1`] = ` } .c2 .fi-filter-input_input { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -464,7 +464,7 @@ exports[`has matching snapshot 1`] = ` } .c13 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -599,7 +599,7 @@ exports[`has matching snapshot 1`] = ` } .c14 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -657,7 +657,7 @@ exports[`has matching snapshot 1`] = ` .c14.fi-button--disabled, .c14[disabled], .c14:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; @@ -851,7 +851,7 @@ exports[`has matching snapshot 1`] = ` } .c8.fi-input-toggle-button .fi-input-toggle-button_icon .fi-icon-base-fill { - fill: hsl(0,0%,16%); + fill: hsl(0,0%,13%); } .c8.fi-input-toggle-button[disabled], diff --git a/src/core/Form/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/src/core/Form/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap index 4a4117b2a..5876daccb 100644 --- a/src/core/Form/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap +++ b/src/core/Form/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap @@ -202,7 +202,7 @@ exports[`has matching snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -217,7 +217,7 @@ exports[`has matching snapshot 1`] = ` } .c6 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -251,7 +251,7 @@ exports[`has matching snapshot 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -370,7 +370,7 @@ exports[`has matching snapshot 1`] = ` } .c2 .fi-filter-input_input { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -576,7 +576,7 @@ exports[`has matching snapshot 1`] = ` } .c12.fi-input-toggle-button .fi-input-toggle-button_icon .fi-icon-base-fill { - fill: hsl(0,0%,16%); + fill: hsl(0,0%,13%); } .c12.fi-input-toggle-button[disabled], diff --git a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap index c72f7aa1f..ec871dd80 100644 --- a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap +++ b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap @@ -137,7 +137,7 @@ exports[`snapshots match error status with statustext 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -165,7 +165,7 @@ exports[`snapshots match error status with statustext 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -248,7 +248,7 @@ exports[`snapshots match error status with statustext 1`] = ` } .c1 .fi-text-input_input { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -541,7 +541,7 @@ exports[`snapshots match hidden label with placeholder 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -569,7 +569,7 @@ exports[`snapshots match hidden label with placeholder 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -652,7 +652,7 @@ exports[`snapshots match hidden label with placeholder 1`] = ` } .c1 .fi-text-input_input { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -930,7 +930,7 @@ exports[`snapshots match minimal implementation 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c4.fi-label .fi-label_label-span .fi-label_optional-text { @@ -958,7 +958,7 @@ exports[`snapshots match minimal implementation 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -1041,7 +1041,7 @@ exports[`snapshots match minimal implementation 1`] = ` } .c1 .fi-text-input_input { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap index 263d19e1f..3dad4c236 100644 --- a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap +++ b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap @@ -137,7 +137,7 @@ exports[`snapshot default structure should match snapshot 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c3.fi-label .fi-label_label-span .fi-label_optional-text { @@ -165,7 +165,7 @@ exports[`snapshot default structure should match snapshot 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -179,7 +179,7 @@ exports[`snapshot default structure should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -193,7 +193,7 @@ exports[`snapshot default structure should match snapshot 1`] = ` font-size: 18px; line-height: 1.5; font-weight: 400; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); width: 290px; } diff --git a/src/core/Form/Toggle/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap b/src/core/Form/Toggle/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap index 413dc377e..c94c000f6 100644 --- a/src/core/Form/Toggle/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/core/Form/Toggle/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap @@ -84,7 +84,7 @@ exports[`Basic ToggleButton should match snapshot 1`] = ` } .c5 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -98,7 +98,7 @@ exports[`Basic ToggleButton should match snapshot 1`] = ` font-size: 18px; line-height: 1.5; font-weight: 400; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c5.fi-text--bold { @@ -253,7 +253,7 @@ exports[`Basic ToggleButton should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Form/Toggle/ToggleInput/__snapshots__/ToggleInput.test.tsx.snap b/src/core/Form/Toggle/ToggleInput/__snapshots__/ToggleInput.test.tsx.snap index fc7eb2580..d205854f7 100644 --- a/src/core/Form/Toggle/ToggleInput/__snapshots__/ToggleInput.test.tsx.snap +++ b/src/core/Form/Toggle/ToggleInput/__snapshots__/ToggleInput.test.tsx.snap @@ -89,7 +89,7 @@ exports[`Basic ToggleInput should match snapshot 1`] = ` } .c6 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -103,7 +103,7 @@ exports[`Basic ToggleInput should match snapshot 1`] = ` font-size: 18px; line-height: 1.5; font-weight: 400; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c6.fi-text--bold { @@ -258,7 +258,7 @@ exports[`Basic ToggleInput should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -316,7 +316,7 @@ exports[`Basic ToggleInput should match snapshot 1`] = ` } .c1 .fi-toggle_input-element { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Heading/__snapshots__/Heading.test.tsx.snap b/src/core/Heading/__snapshots__/Heading.test.tsx.snap index a077c6a45..ff875b3c1 100644 --- a/src/core/Heading/__snapshots__/Heading.test.tsx.snap +++ b/src/core/Heading/__snapshots__/Heading.test.tsx.snap @@ -31,7 +31,7 @@ exports[`calling render with the same component on the same container does not r } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -45,7 +45,7 @@ exports[`calling render with the same component on the same container does not r font-size: 18px; line-height: 1.5; font-weight: 400; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c1.fi-heading--h1hero { diff --git a/src/core/LanguageMenu/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/src/core/LanguageMenu/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap index 9be5b12a2..0a47baa8e 100644 --- a/src/core/LanguageMenu/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap +++ b/src/core/LanguageMenu/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap @@ -55,7 +55,7 @@ exports[`calling render with the same component on the same container does not r } .c1 > [data-reach-menu-button].fi-language-menu_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; font-size: 18px; line-height: 1.5; @@ -64,7 +64,7 @@ exports[`calling render with the same component on the same container does not r } .c1 > [data-reach-menu-button].fi-language-menu_button.fi-language-menu-language_button { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; font-size: 16px; line-height: 1.5; diff --git a/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap b/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap index 4feac0ace..4d3e3d183 100644 --- a/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap +++ b/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap @@ -183,7 +183,7 @@ exports[`should match snapshot 1`] = ` padding: 8px; background: hsl(212,63%,95%); border: 1px solid hsl(202,7%,80%); - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c2.fi-link--skip:focus { diff --git a/src/core/LoadingSpinner/__snapshots__/LoadingSpinner.test.tsx.snap b/src/core/LoadingSpinner/__snapshots__/LoadingSpinner.test.tsx.snap index 0ffd9fec0..fd94d7174 100644 --- a/src/core/LoadingSpinner/__snapshots__/LoadingSpinner.test.tsx.snap +++ b/src/core/LoadingSpinner/__snapshots__/LoadingSpinner.test.tsx.snap @@ -76,7 +76,7 @@ exports[`snapshot should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap b/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap index cf5cb072a..e094edd46 100644 --- a/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap +++ b/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Basic modal should match snapshot 1`] = ` .c0.fi-modal_base { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -19,7 +19,7 @@ exports[`Basic modal should match snapshot 1`] = ` } .c0.fi-modal_base .fi-modal_overlay { - background-color: rgba(41,41,41,0.5); + background-color: rgba(33,33,33,0.5); position: fixed; top: 0; left: 0; @@ -230,7 +230,7 @@ exports[`Basic modal should match snapshot 1`] = ` } .c2 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -276,7 +276,7 @@ exports[`Basic modal should match snapshot 1`] = ` } .c6 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -290,7 +290,7 @@ exports[`Basic modal should match snapshot 1`] = ` font-size: 18px; line-height: 1.5; font-weight: 400; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c6.fi-heading--h1hero { @@ -622,7 +622,7 @@ exports[`Basic modal should match snapshot 1`] = ` } .c9 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -680,7 +680,7 @@ exports[`Basic modal should match snapshot 1`] = ` .c9.fi-button--disabled, .c9[disabled], .c9:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; diff --git a/src/core/Modal/ModalContent/__snapshots__/ModalContent.test.tsx.snap b/src/core/Modal/ModalContent/__snapshots__/ModalContent.test.tsx.snap index aa24ce492..603106627 100644 --- a/src/core/Modal/ModalContent/__snapshots__/ModalContent.test.tsx.snap +++ b/src/core/Modal/ModalContent/__snapshots__/ModalContent.test.tsx.snap @@ -89,7 +89,7 @@ exports[`Basic ModalContent should match snapshot 1`] = ` } .c0.fi-modal_base { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -106,7 +106,7 @@ exports[`Basic ModalContent should match snapshot 1`] = ` } .c0.fi-modal_base .fi-modal_overlay { - background-color: rgba(41,41,41,0.5); + background-color: rgba(33,33,33,0.5); position: fixed; top: 0; left: 0; @@ -177,7 +177,7 @@ exports[`Basic ModalContent should match snapshot 1`] = ` } .c2 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -223,7 +223,7 @@ exports[`Basic ModalContent should match snapshot 1`] = ` } .c6 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -237,7 +237,7 @@ exports[`Basic ModalContent should match snapshot 1`] = ` font-size: 18px; line-height: 1.5; font-weight: 400; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c6.fi-heading--h1hero { diff --git a/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap b/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap index cb92a8cc7..5c6272cfb 100644 --- a/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap +++ b/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` .c0.fi-modal_base { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -19,7 +19,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` } .c0.fi-modal_base .fi-modal_overlay { - background-color: rgba(41,41,41,0.5); + background-color: rgba(33,33,33,0.5); position: fixed; top: 0; left: 0; @@ -217,7 +217,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` } .c4 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -275,7 +275,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = ` .c4.fi-button--disabled, .c4[disabled], .c4:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; diff --git a/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap b/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap index 93cd4dc38..5be6b418d 100644 --- a/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap +++ b/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap @@ -332,7 +332,7 @@ exports[`should match snapshot 1`] = ` .c5.fi-service-navigation-item .fi-link--router { -webkit-text-decoration: none; text-decoration: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -351,7 +351,7 @@ exports[`should match snapshot 1`] = ` outline: 0; border: none; box-shadow: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c5.fi-service-navigation-item .fi-link--router:hover, @@ -359,7 +359,7 @@ exports[`should match snapshot 1`] = ` .c5.fi-service-navigation-item .fi-link--router:visited { -webkit-text-decoration: none; text-decoration: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c5.fi-service-navigation-item--disabled:hover, @@ -420,7 +420,7 @@ exports[`should match snapshot 1`] = ` font-weight: bold; -webkit-text-decoration: none; text-decoration: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -438,7 +438,7 @@ exports[`should match snapshot 1`] = ` .c5.fi-service-navigation-item--selected .fi-link--router:visited { -webkit-text-decoration: none; text-decoration: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c11 { @@ -596,7 +596,7 @@ exports[`should match snapshot 1`] = ` } .c9 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap b/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap index 4690f7af1..bbc07ad24 100644 --- a/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap +++ b/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap @@ -471,7 +471,7 @@ exports[`calling render with the same component on the same container does not r .c5.fi-wizard-navigation-item--current .fi-wizard-navigation-item_inner-wrapper .fi-link--router { pointer-events: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -492,7 +492,7 @@ exports[`calling render with the same component on the same container does not r .c5.fi-wizard-navigation-item--current .fi-wizard-navigation-item_inner-wrapper .fi-link--router:focus { -webkit-text-decoration: none; text-decoration: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c5.fi-wizard-navigation-item--current-completed { @@ -542,7 +542,7 @@ exports[`calling render with the same component on the same container does not r .c5.fi-wizard-navigation-item--current-completed .fi-wizard-navigation-item_inner-wrapper .fi-link--router { pointer-events: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -563,7 +563,7 @@ exports[`calling render with the same component on the same container does not r .c5.fi-wizard-navigation-item--current-completed .fi-wizard-navigation-item_inner-wrapper .fi-link--router:focus { -webkit-text-decoration: none; text-decoration: none; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c5.fi-wizard-navigation-item--completed:hover { diff --git a/src/core/Notification/__snapshots__/Notification.test.tsx.snap b/src/core/Notification/__snapshots__/Notification.test.tsx.snap index 4eed7061c..13c7e61f2 100644 --- a/src/core/Notification/__snapshots__/Notification.test.tsx.snap +++ b/src/core/Notification/__snapshots__/Notification.test.tsx.snap @@ -166,7 +166,7 @@ exports[`props children should match snapshot 1`] = ` } .c5 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -180,7 +180,7 @@ exports[`props children should match snapshot 1`] = ` font-size: 18px; line-height: 1.5; font-weight: 400; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c5.fi-heading--h1hero { @@ -424,7 +424,7 @@ exports[`props children should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -439,7 +439,7 @@ exports[`props children should match snapshot 1`] = ` line-height: 1.5; font-weight: 400; width: 100%; - box-shadow: 0px 4px 8px 0px hsla(0,0%,16%,0.14); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); border-radius: 4px; padding-bottom: 10px; } @@ -602,7 +602,7 @@ exports[`props children should match snapshot 1`] = ` } .c1.fi-notification .fi-notification_close-button:hover { - border-color: hsl(0,0%,16%); + border-color: hsl(0,0%,13%); } .c1.fi-notification--neutral { diff --git a/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap index bf34f5bed..352a2c75f 100644 --- a/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -226,7 +226,7 @@ exports[`snapshot should have matching default structure 1`] = ` font-size: 16px; line-height: 1.5; font-weight: 600; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); font-size: 14px; line-height: 20px; } @@ -255,7 +255,7 @@ exports[`snapshot should have matching default structure 1`] = ` font-weight: 600; display: inline-block; vertical-align: middle; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c10.fi-label .fi-label_label-span .fi-label_optional-text { @@ -329,7 +329,7 @@ exports[`snapshot should have matching default structure 1`] = ` .c8 .fi-page-input_input-element-container { background-color: hsl(0,0%,100%); - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); width: 100%; height: 40px; box-sizing: border-box; @@ -378,7 +378,7 @@ exports[`snapshot should have matching default structure 1`] = ` } .c8 .fi-page-input_input { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -522,7 +522,7 @@ exports[`snapshot should have matching default structure 1`] = ` } .c6 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -580,7 +580,7 @@ exports[`snapshot should have matching default structure 1`] = ` .c6.fi-button--disabled, .c6[disabled], .c6:disabled { - text-shadow: 0 1px 1px rgba(41,41,41,0.5); + text-shadow: 0 1px 1px rgba(33,33,33,0.5); background: linear-gradient(0deg,hsl(202,7%,67%) 0%,hsl(202,7%,80%) 100%); -webkit-user-select: none; -moz-user-select: none; @@ -745,7 +745,7 @@ exports[`snapshot should have matching default structure 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap b/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap index 28eca45c3..3699af89f 100644 --- a/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap +++ b/src/core/Paragraph/__snapshots__/Paragraph.test.tsx.snap @@ -31,7 +31,7 @@ exports[`calling render with the same component on the same container does not r } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; diff --git a/src/core/Text/__snapshots__/Text.test.tsx.snap b/src/core/Text/__snapshots__/Text.test.tsx.snap index cf4d22cd0..ba48c2f71 100644 --- a/src/core/Text/__snapshots__/Text.test.tsx.snap +++ b/src/core/Text/__snapshots__/Text.test.tsx.snap @@ -31,7 +31,7 @@ exports[`calling render with the same component on the same container does not r } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -142,7 +142,7 @@ exports[`calling render with the same component on the same container does not r } .c3 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -156,7 +156,7 @@ exports[`calling render with the same component on the same container does not r font-size: 18px; line-height: 1.5; font-weight: 400; - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); } .c3.fi-text--bold { diff --git a/src/core/Toast/__snapshots__/Toast.test.tsx.snap b/src/core/Toast/__snapshots__/Toast.test.tsx.snap index 88461ad02..bfb9ba38e 100644 --- a/src/core/Toast/__snapshots__/Toast.test.tsx.snap +++ b/src/core/Toast/__snapshots__/Toast.test.tsx.snap @@ -84,7 +84,7 @@ exports[`props children should match snapshot 1`] = ` } .c1 { - color: hsl(0,0%,16%); + color: hsl(0,0%,13%); -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; @@ -100,7 +100,7 @@ exports[`props children should match snapshot 1`] = ` font-weight: 400; border-top: 4px solid hsl(166,90%,34%); width: 100%; - box-shadow: 0px 4px 8px 0px hsla(0,0%,16%,0.14); + box-shadow: 0px 4px 8px 0px hsla(0,0%,13%,0.14); border-radius: 4px; overflow: hidden; } diff --git a/src/core/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/core/Tooltip/__snapshots__/Tooltip.test.tsx.snap index 9b93b692c..c203bf696 100644 --- a/src/core/Tooltip/__snapshots__/Tooltip.test.tsx.snap +++ b/src/core/Tooltip/__snapshots__/Tooltip.test.tsx.snap @@ -122,7 +122,7 @@ exports[`Basic tooltip should match snapshot 1`] = ` border-radius: 2px; background-color: hsl(212,63%,98%); padding: 20px 43px 20px 20px; - box-shadow: 0 2px 3px 0 hsla(0,0%,16%,0.2); + box-shadow: 0 2px 3px 0 hsla(0,0%,13%,0.2); } .c4.fi-tooltip_content:before, @@ -136,7 +136,7 @@ exports[`Basic tooltip should match snapshot 1`] = ` } .c4.fi-tooltip_content:before { - border-bottom-color: hsl(0,0%,16%); + border-bottom-color: hsl(0,0%,13%); border-width: 9px; left: 0px; margin-right: -9px; @@ -196,7 +196,7 @@ exports[`Basic tooltip should match snapshot 1`] = ` } .c4.fi-tooltip_content .fi-tooltip_close-button:hover { - outline: 1px solid hsl(0,0%,16%); + outline: 1px solid hsl(0,0%,13%); } .c4.fi-tooltip_content .fi-heading { From b2a1b2483c738da8a7854c16e7bddcf769d9278d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Thu, 2 Feb 2023 15:14:21 +0200 Subject: [PATCH 8/8] Fix styleguidist themevalues.md page --- .styleguidist/themevalues.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.styleguidist/themevalues.md b/.styleguidist/themevalues.md index 87aca0ef1..b2a6864fc 100644 --- a/.styleguidist/themevalues.md +++ b/.styleguidist/themevalues.md @@ -2,7 +2,7 @@ ### Colors -Theme colors is of type _`ColorDesignTokens`_ and defines all the colors and gradients used in the components. +Theme category colors is of type _`ColorDesignTokens`_ and defines all the colors and gradients used in the components. ```js noeditor import { SuomifiThemeConsumer } from '../src/core/theme'; @@ -17,7 +17,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps'; ### Spacing -Theme spacing is of type _`SpacingDesignTokens`_ and defines external spacing used between more complex elements as well as some parts of internal spacing. +Theme category spacing is of type _`SpacingDesignTokens`_ and defines external spacing used between more complex elements as well as some parts of internal spacing. ```js noeditor import { SuomifiThemeConsumer } from '../src/core/theme'; @@ -32,7 +32,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps'; ### Typography -Theme typography is of type _`TypographyDesignTokens`_ and defines most typography styles used in the components. +Theme category typography is of type _`TypographyDesignTokens`_ and defines most typography styles used in the components. ```js noeditor import { SuomifiThemeConsumer } from '../src/core/theme'; @@ -50,7 +50,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps'; ### Gradients -Theme gradients is of type _`GradientDesignTokens`_ and defines all gradient colors used in the components. By default, gradients are based on color design tokens. +Theme category gradients is of type _`GradientDesignTokens`_ and defines all gradient colors used in the components. By default, gradients are based on color design tokens. ```js noeditor import { SuomifiThemeConsumer } from '../src/core/theme'; @@ -65,7 +65,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps'; ### Focus -Theme focus is of type _`FocusDesignTokens`_ and defines all focus styles used in the library. By default, focus styles are based on color, spacing and radius design tokens. +Theme category focuses is of type _`FocusDesignTokens`_ and defines all focus styles used in the library. By default, focus styles are based on color, spacing and radius design tokens. ```js noeditor import { SuomifiThemeConsumer } from '../src/core/theme'; @@ -73,14 +73,14 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps'; {({ suomifiTheme }) => ( - + )} ; ``` ### Radius -Theme focus is of type _`RadiusDesignTokens`_ and defines all focus styles used in the library. +Theme category radiuses is of type _`RadiusDesignTokens`_ and defines all radius styles used in the library. ```js noeditor import { SuomifiThemeConsumer } from '../src/core/theme'; @@ -88,14 +88,14 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps'; {({ suomifiTheme }) => ( - + )} ; ``` ### Shadows -Theme focus is of type _`ShadowDesignTokens`_ and defines all shadow styles used in the library. By default, shadow styles are based on color design tokens. +Theme category shadows is of type _`ShadowDesignTokens`_ and defines all shadow styles used in the library. By default, shadow styles are based on color design tokens. ```js noeditor import { SuomifiThemeConsumer } from '../src/core/theme'; @@ -110,7 +110,7 @@ import { ThemeProps } from '../src/docs/Theme/ThemeProps'; ### Transitions -Theme focus is of type _`TransitionDesignTokens`_ and defines all shadow styles used in the library. By default, shadow styles are based on color design tokens. +Theme category transitions is of type _`TransitionDesignTokens`_ and defines the most commonly used transition styles used in the library. ```js noeditor import { SuomifiThemeConsumer } from '../src/core/theme';