feat(tokens): change fontSizeSm to 13px and fontSizeMd to 15px

kiwicom · Apr 27, 2023 · 262104e · 262104e
1 parent 8a47fb5
commit 262104e
Show file tree

Hide file tree

Showing 19 changed files with 184 additions and 181 deletions.
diff --git a/packages/orbit-components/src/ChoiceGroup/components/Feedback.tsx b/packages/orbit-components/src/ChoiceGroup/components/Feedback.tsx
@@ -14,7 +14,7 @@ export const StyledFormFeedback = styled(props => <div {...props} />)`
     font-family: ${theme.orbit.fontFamily};
     font-size: ${theme.orbit.fontSizeFormFeedback};
     font-weight: ${theme.orbit.fontWeightMedium};
-    line-height: ${theme.orbit.lineHeightText};
+    line-height: ${theme.orbit.lineHeightTextSmall};
     width: 100%;
     margin-top: 2px;
     position: absolute;

diff --git a/packages/orbit-components/src/ErrorFormTooltip/Tooltip/index.tsx b/packages/orbit-components/src/ErrorFormTooltip/Tooltip/index.tsx
@@ -100,7 +100,7 @@ const StyledTooltipContent = styled.div`
     font-family: ${theme.orbit.fontFamily};
     font-size: ${theme.orbit.fontSizeTextNormal};
     font-weight: ${theme.orbit.fontWeightNormal};
-    line-height: ${theme.orbit.lineHeightText};
+    line-height: ${theme.orbit.lineHeightTextSmall};
     color: ${theme.orbit.paletteWhite};
 
     & ${StyledText}, ${Item}, a {

diff --git a/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledIconWrapper.ts b/packages/orbit-components/src/Timeline/TimelineStep/primitives/StyledIconWrapper.ts
@@ -29,7 +29,7 @@ const StyledIconWrapper = styled.div<{ mobile?: boolean; status?: Type; active?:
     text-align: center;
     position: relative;
     height: 20px;
-    line-height: ${theme.orbit.lineHeightText};
+    line-height: ${theme.orbit.lineHeightTextSmall};
     &:after {
       position: absolute;
       top: 0px;

diff --git a/packages/orbit-components/src/primitives/BadgePrimitive/index.tsx b/packages/orbit-components/src/primitives/BadgePrimitive/index.tsx
@@ -59,7 +59,7 @@ IconContainer.defaultProps = {
 
 const StyledBadgeContent = styled.div<{ $isCarrier?: boolean }>`
   ${({ theme, $isCarrier }) => css`
-    padding: 5px 0;
+    padding: ${theme.orbit.spaceXXSmall} 0;
     line-height: 1;
     margin-${left}: ${
     $isCarrier && parseInt(theme.orbit.widthIconMedium, 10) - parseInt(theme.orbit.spaceXXSmall, 10)

diff --git a/...src/primitives/ButtonPrimitive/common/__tests__/__snapshots__/getCommonProps.test.ts.snap b/...src/primitives/ButtonPrimitive/common/__tests__/__snapshots__/getCommonProps.test.ts.snap
@@ -4,7 +4,7 @@ exports[`ButtonPrimitive: getCommonProps function should match: dynamic width an
 Object {
   "contentAlign": "center",
   "contentWidth": "100%",
-  "fontSize": "14px",
+  "fontSize": "15px",
   "fontWeight": "500",
   "height": "44px",
   "padding": "0",
@@ -28,7 +28,7 @@ exports[`ButtonPrimitive: getCommonProps function should match: undefined conten
 Object {
   "contentAlign": "center",
   "contentWidth": undefined,
-  "fontSize": "14px",
+  "fontSize": "15px",
   "fontWeight": "500",
   "height": "44px",
   "padding": "0 16px",

diff --git a/...s/src/primitives/ButtonPrimitive/common/__tests__/__snapshots__/getSizeToken.test.ts.snap b/...s/src/primitives/ButtonPrimitive/common/__tests__/__snapshots__/getSizeToken.test.ts.snap
@@ -9,14 +9,14 @@ Object {
 
 exports[`ButtonPrimitive: getSizeToken function normal size, should match snapshot 1`] = `
 Object {
-  "fontSize": "14px",
+  "fontSize": "15px",
   "height": "44px",
 }
 `;
 
 exports[`ButtonPrimitive: getSizeToken function small size, should match snapshot 1`] = `
 Object {
-  "fontSize": "12px",
+  "fontSize": "13px",
   "height": "32px",
 }
 `;
diff --git a/packages/orbit-design-tokens/output/theo-spec.android.xml b/packages/orbit-design-tokens/output/theo-spec.android.xml
@@ -8,7 +8,7 @@
   <color name="BORDERCOLORBUTTONFACEBOOKBORDEREDACTIVE" category="">#ff354f88</color>
   <dimen name="HEIGHTBUTTONNORMAL" category="">44dp</dimen>
   <color name="COLORICONWARNING" category="">#ffdf7b00</color>
-  <dimen name="FONTSIZEFORMLABEL" category="">14dp</dimen>
+  <dimen name="FONTSIZEFORMLABEL" category="">15dp</dimen>
   <color name="PALETTECLOUDLIGHTHOVER" category="">#ffe5eaef</color>
   <color name="COLORTEXTBUTTONWARNINGACTIVE" category="">#ffffffff</color>
   <color name="PALETTEREDLIGHT" category="">#fffaeaea</color>
@@ -30,7 +30,7 @@
   <color name="PALETTEPRODUCTNORMALHOVER" category="">#ff009580</color>
   <dimen name="SPACEXXSMALL" category="">4dp</dimen>
   <color name="COLORTEXTBUTTONGOOGLEACTIVE" category="">#ff0b0c0f</color>
-  <dimen name="FONTSIZEINPUTNORMAL" category="">14dp</dimen>
+  <dimen name="FONTSIZEINPUTNORMAL" category="">15dp</dimen>
   <color name="COLORTEXTBUTTONGOOGLEHOVER" category="">#ff181b20</color>
   <color name="PALETTEPRODUCTNORMALACTIVE" category="">#ff008472</color>
   <dimen name="LINEHEIGHTHEADINGTITLE2" category="">28dp</dimen>
@@ -64,7 +64,7 @@
   <color name="COLORTEXTSECONDARY" category="">#ff4f5e71</color>
   <color name="COLORTEXTLINKPRIMARYHOVER" category="">#ff00a58e</color>
   <color name="COLORTEXTBUTTONLINKSECONDARYHOVER" category="">#ff181b20</color>
-  <dimen name="FONTSIZETEXTNORMAL" category="">14dp</dimen>
+  <dimen name="FONTSIZETEXTNORMAL" category="">15dp</dimen>
   <color name="PALETTEGREENDARKACTIVE" category="">#ff1f5126</color>
   <color name="BORDERCOLORBUTTONPRIMARYBORDERED" category="">#ff00a58e</color>
   <color name="BORDERCOLORBUTTONWARNINGBORDEREDACTIVE" category="">#ffb26200</color>
@@ -77,7 +77,7 @@
   <string name="OPACITYOVERLAY" category="Opacity">0.8</string>
   <integer name="WIDTHBREAKPOINTDESKTOP" category="">992</integer>
   <string name="BORDERSTYLEINPUT" category="">solid</string>
-  <dimen name="FONTSIZEBUTTONSMALL" category="">12dp</dimen>
+  <dimen name="FONTSIZEBUTTONSMALL" category="">13dp</dimen>
   <dimen name="BORDERRADIUSNORMAL" category="">3dp</dimen>
   <dimen name="BORDERRADIUSBADGE" category="">12dp</dimen>
   <color name="COLORTEXTBUTTONWARNINGBORDERED" category="">#ffdf7b00</color>
@@ -149,10 +149,10 @@
   <color name="COLORTEXTBUTTONFACEBOOKBORDEREDHOVER" category="">#ff385490</color>
   <color name="BORDERCOLORBUTTONCRITICALBORDEREDHOVER" category="">#ffb91919</color>
   <dimen name="SPACEXXXLARGE" category="">52dp</dimen>
-  <dimen name="FONTSIZEBUTTONNORMAL" category="">14dp</dimen>
+  <dimen name="FONTSIZEBUTTONNORMAL" category="">15dp</dimen>
   <dimen name="BORDERRADIUSSMALL" category="">2dp</dimen>
   <color name="PALETTEINKNORMALHOVER" category="">#ff3e4e63</color>
-  <dimen name="FONTSIZETEXTSMALL" category="">12dp</dimen>
+  <dimen name="FONTSIZETEXTSMALL" category="">13dp</dimen>
   <color name="COLORTEXTLINKSECONDARY" category="">#ff252a31</color>
   <color name="COLORICONINFO" category="">#ff0172cb</color>
   <dimen name="PADDINGBUTTONNORMAL" category="">0 16dp</dimen>
@@ -212,7 +212,7 @@
   <dimen name="HEIGHTSTOPOVERARROW" category="">7dp</dimen>
   <color name="BORDERCOLORBUTTONGOOGLEBORDERED" category="">#ff252a31</color>
   <color name="BACKGROUNDTAGSELECTEDACTIVE" category="">#ff0b0c0f</color>
-  <dimen name="FONTSIZEINPUTSMALL" category="">14dp</dimen>
+  <dimen name="FONTSIZEINPUTSMALL" category="">15dp</dimen>
   <color name="COLORFORMLABEL" category="">#ff252a31</color>
   <color name="COLORICONRADIOBUTTONDISABLED" category="">#ff4f5e71</color>
   <color name="COLORTEXTBUTTONWHITEACTIVE" category="">#ff0b0c0f</color>
@@ -237,7 +237,7 @@
   <dimen name="BORDERRADIUSCIRCLE" category="Border radius">0.5</dimen>
   <color name="COLORTEXTBUTTONCRITICALSUBTLE" category="">#ff970c0c</color>
   <color name="PALETTEWHITE" category="">#ffffffff</color>
-  <dimen name="FONTSIZEHEADINGTITLE4" category="">14dp</dimen>
+  <dimen name="FONTSIZEHEADINGTITLE4" category="">15dp</dimen>
   <color name="COLORPLACEHOLDERINPUTERROR" category="">#ffd21c1c</color>
   <color name="COLORICONINPUT" category="">#ffbac7d5</color>
   <color name="BACKGROUNDBUTTONINFO" category="">#ff0172cb</color>
@@ -256,7 +256,7 @@
   <color name="BORDERCOLORBUTTONGOOGLEBORDEREDHOVER" category="">#ff181b20</color>
   <color name="BACKGROUNDBUTTONPRIMARYSUBTLE" category="">#ffe1f4f3</color>
   <color name="COLORTEXTBUTTONPRIMARYSUBTLEHOVER" category="">#ff007060</color>
-  <dimen name="FONTSIZEHEADINGTITLE5" category="">12dp</dimen>
+  <dimen name="FONTSIZEHEADINGTITLE5" category="">13dp</dimen>
   <color name="BACKGROUNDBUTTONWHITEACTIVE" category="">#ffe5eaef</color>
   <color name="COLORTEXTCRITICAL" category="">#ffd21c1c</color>
   <color name="PALETTEORANGELIGHTHOVER" category="">#fffcecda</color>
@@ -386,7 +386,7 @@
   <color name="BACKGROUNDBUTTONFACEBOOKHOVER" category="">#ff385490</color>
   <color name="BORDERCOLORCHECKBOXRADIOFOCUS" category="">#ff0172cb</color>
   <string name="BACKGROUNDBUTTONBUNDLEMEDIUM" category="">linear-gradient(to top right, #3719AB 0, #8539DB 1)</string>
-  <dimen name="FONTSIZEMESSAGE" category="">14dp</dimen>
+  <dimen name="FONTSIZEMESSAGE" category="">15dp</dimen>
   <string name="FONTWEIGHTHEADINGTITLE4" category="">500</string>
   <color name="BORDERCOLORBUTTONSUCCESSBORDEREDHOVER" category="">#ff238b31</color>
   <dimen name="WIDTHBADGECIRCLED" category="">24dp</dimen>
@@ -422,7 +422,7 @@
   <string name="OPACITYBUTTONDISABLED" category="">0.3</string>
   <color name="BACKGROUNDBUTTONSUCCESSHOVER" category="">#ff238b31</color>
   <color name="BORDERCOLORTABLECELL" category="">#ffbac7d5</color>
-  <dimen name="FONTSIZEFORMFEEDBACK" category="">12dp</dimen>
+  <dimen name="FONTSIZEFORMFEEDBACK" category="">13dp</dimen>
   <color name="BORDERCOLORBUTTONCRITICALBORDEREDACTIVE" category="">#ff9d1515</color>
   <color name="COLORTEXTBUTTONFACEBOOKBORDEREDACTIVE" category="">#ff354f88</color>
   <color name="PALETTEREDDARKER" category="">#ff760909</color>
@@ -517,4 +517,4 @@
   <color name="PALETTEORANGEDARK" category="">#ffad5700</color>
   <dimen name="LINEHEIGHTTEXTSMALL" category="">16dp</dimen>
   <dimen name="MARGINBUTTONGROUP" category="">0 1px 0 0</dimen>
-</resources>
+</resources>
diff --git a/packages/orbit-design-tokens/output/theo-spec.common.js b/packages/orbit-design-tokens/output/theo-spec.common.js
@@ -16,7 +16,7 @@ module.exports = {
   /*  */
   colorIconWarning: "rgb(223, 123, 0)",
   /*  */
-  fontSizeFormLabel: "14px",
+  fontSizeFormLabel: "15px",
   /*  */
   paletteCloudLightHover: "rgb(229, 234, 239)",
   /*  */
@@ -60,7 +60,7 @@ module.exports = {
   /*  */
   colorTextButtonGoogleActive: "rgb(11, 12, 15)",
   /*  */
-  fontSizeInputNormal: "14px",
+  fontSizeInputNormal: "15px",
   /*  */
   colorTextButtonGoogleHover: "rgb(24, 27, 32)",
   /*  */
@@ -128,7 +128,7 @@ module.exports = {
   /*  */
   colorTextButtonLinkSecondaryHover: "rgb(24, 27, 32)",
   /*  */
-  fontSizeTextNormal: "14px",
+  fontSizeTextNormal: "15px",
   /*  */
   paletteGreenDarkActive: "rgb(31, 81, 38)",
   /*  */
@@ -154,7 +154,7 @@ module.exports = {
   /*  */
   borderStyleInput: "solid",
   /*  */
-  fontSizeButtonSmall: "12px",
+  fontSizeButtonSmall: "13px",
   /*  */
   borderRadiusNormal: "3px",
   /*  */
@@ -298,13 +298,13 @@ module.exports = {
   /*  */
   spaceXxxLarge: "52px",
   /*  */
-  fontSizeButtonNormal: "14px",
+  fontSizeButtonNormal: "15px",
   /*  */
   borderRadiusSmall: "2px",
   /*  */
   paletteInkNormalHover: "rgb(62, 78, 99)",
   /*  */
-  fontSizeTextSmall: "12px",
+  fontSizeTextSmall: "13px",
   /*  */
   colorTextLinkSecondary: "rgb(37, 42, 49)",
   /*  */
@@ -424,7 +424,7 @@ module.exports = {
   /*  */
   backgroundTagSelectedActive: "rgb(11, 12, 15)",
   /*  */
-  fontSizeInputSmall: "14px",
+  fontSizeInputSmall: "15px",
   /*  */
   colorFormLabel: "rgb(37, 42, 49)",
   /*  */
@@ -474,7 +474,7 @@ module.exports = {
   /*  */
   paletteWhite: "rgb(255, 255, 255)",
   /*  */
-  fontSizeHeadingTitle4: "14px",
+  fontSizeHeadingTitle4: "15px",
   /*  */
   colorPlaceholderInputError: "rgb(210, 28, 28)",
   /*  */
@@ -512,7 +512,7 @@ module.exports = {
   /*  */
   colorTextButtonPrimarySubtleHover: "rgb(0, 112, 96)",
   /*  */
-  fontSizeHeadingTitle5: "12px",
+  fontSizeHeadingTitle5: "13px",
   /*  */
   backgroundButtonWhiteActive: "rgb(229, 234, 239)",
   /*  */
@@ -772,7 +772,7 @@ module.exports = {
   /*  */
   backgroundButtonBundleMedium: "linear-gradient(to top right, #3719AB 0%, #8539DB 100%)",
   /*  */
-  fontSizeMessage: "14px",
+  fontSizeMessage: "15px",
   /*  */
   fontWeightHeadingTitle4: "500",
   /*  */
@@ -844,7 +844,7 @@ module.exports = {
   /*  */
   borderColorTableCell: "rgb(186, 199, 213)",
   /*  */
-  fontSizeFormFeedback: "12px",
+  fontSizeFormFeedback: "13px",
   /*  */
   borderColorButtonCriticalBorderedActive: "rgb(157, 21, 21)",
   /*  */

diff --git a/packages/orbit-design-tokens/output/theo-spec.cssmodules.css b/packages/orbit-design-tokens/output/theo-spec.cssmodules.css
@@ -1,4 +1,3 @@
-
 @value background-button-link-secondary-active: rgb(214, 222, 230);
 @value padding-input-normal: 0 12px;
 @value width-modal-small: 540px;
@@ -7,7 +6,7 @@
 @value border-color-button-facebook-bordered-active: rgb(53, 79, 136);
 @value height-button-normal: 44px;
 @value color-icon-warning: rgb(223, 123, 0);
-@value font-size-form-label: 14px;
+@value font-size-form-label: 15px;
 @value palette-cloud-light-hover: rgb(229, 234, 239);
 @value color-text-button-warning-active: rgb(255, 255, 255);
 @value palette-red-light: rgb(250, 234, 234);
@@ -29,7 +28,7 @@
 @value palette-product-normal-hover: rgb(0, 149, 128);
 @value space-xx-small: 4px;
 @value color-text-button-google-active: rgb(11, 12, 15);
-@value font-size-input-normal: 14px;
+@value font-size-input-normal: 15px;
 @value color-text-button-google-hover: rgb(24, 27, 32);
 @value palette-product-normal-active: rgb(0, 132, 114);
 @value line-height-heading-title2: 28px;
@@ -63,7 +62,7 @@
 @value color-text-secondary: rgb(79, 94, 113);
 @value color-text-link-primary-hover: rgb(0, 165, 142);
 @value color-text-button-link-secondary-hover: rgb(24, 27, 32);
-@value font-size-text-normal: 14px;
+@value font-size-text-normal: 15px;
 @value palette-green-dark-active: rgb(31, 81, 38);
 @value border-color-button-primary-bordered: rgb(0, 165, 142);
 @value border-color-button-warning-bordered-active: rgb(178, 98, 0);
@@ -76,7 +75,7 @@
 @value opacity-overlay: "0.8";
 @value width-breakpoint-desktop: 992;
 @value border-style-input: "solid";
-@value font-size-button-small: 12px;
+@value font-size-button-small: 13px;
 @value border-radius-normal: 3px;
 @value border-radius-badge: 12px;
 @value color-text-button-warning-bordered: rgb(223, 123, 0);
@@ -148,10 +147,10 @@
 @value color-text-button-facebook-bordered-hover: rgb(56, 84, 144);
 @value border-color-button-critical-bordered-hover: rgb(185, 25, 25);
 @value space-xxx-large: 52px;
-@value font-size-button-normal: 14px;
+@value font-size-button-normal: 15px;
 @value border-radius-small: 2px;
 @value palette-ink-normal-hover: rgb(62, 78, 99);
-@value font-size-text-small: 12px;
+@value font-size-text-small: 13px;
 @value color-text-link-secondary: rgb(37, 42, 49);
 @value color-icon-info: rgb(1, 114, 203);
 @value padding-button-normal: 0 16px;
@@ -211,7 +210,7 @@
 @value height-stopover-arrow: 7px;
 @value border-color-button-google-bordered: rgb(37, 42, 49);
 @value background-tag-selected-active: rgb(11, 12, 15);
-@value font-size-input-small: 14px;
+@value font-size-input-small: 15px;
 @value color-form-label: rgb(37, 42, 49);
 @value color-icon-radio-button-disabled: rgb(79, 94, 113);
 @value color-text-button-white-active: rgb(11, 12, 15);
@@ -236,7 +235,7 @@
 @value border-radius-circle: 50%;
 @value color-text-button-critical-subtle: rgb(151, 12, 12);
 @value palette-white: rgb(255, 255, 255);
-@value font-size-heading-title4: 14px;
+@value font-size-heading-title4: 15px;
 @value color-placeholder-input-error: rgb(210, 28, 28);
 @value color-icon-input: rgb(186, 199, 213);
 @value background-button-info: rgb(1, 114, 203);
@@ -255,7 +254,7 @@
 @value border-color-button-google-bordered-hover: rgb(24, 27, 32);
 @value background-button-primary-subtle: rgb(225, 244, 243);
 @value color-text-button-primary-subtle-hover: rgb(0, 112, 96);
-@value font-size-heading-title5: 12px;
+@value font-size-heading-title5: 13px;
 @value background-button-white-active: rgb(229, 234, 239);
 @value color-text-critical: rgb(210, 28, 28);
 @value palette-orange-light-hover: rgb(252, 236, 218);
@@ -385,7 +384,7 @@
 @value background-button-facebook-hover: rgb(56, 84, 144);
 @value border-color-checkbox-radio-focus: rgb(1, 114, 203);
 @value background-button-bundle-medium: "linear-gradient(to top right, #3719AB 0%, #8539DB 100%)";
-@value font-size-message: 14px;
+@value font-size-message: 15px;
 @value font-weight-heading-title4: "500";
 @value border-color-button-success-bordered-hover: rgb(35, 139, 49);
 @value width-badge-circled: 24px;
@@ -421,7 +420,7 @@
 @value opacity-button-disabled: "0.3";
 @value background-button-success-hover: rgb(35, 139, 49);
 @value border-color-table-cell: rgb(186, 199, 213);
-@value font-size-form-feedback: 12px;
+@value font-size-form-feedback: 13px;
 @value border-color-button-critical-bordered-active: rgb(157, 21, 21);
 @value color-text-button-facebook-bordered-active: rgb(53, 79, 136);
 @value palette-red-darker: rgb(118, 9, 9);