@gympass/yoga 7.139.1 → 7.141.0

package/cjs/Checkbox/Checkbox.theme.js

@@ -28,7 +28,8 @@ const Checkbox = ({ spacing, colors, borders, radii, fontSizes }) => ({
   },
   border: {
     width: borders.medium,
-    radius: radii.xsmall
+    radius: radii.xsmall,
+    color: colors.mediumNew
   },
   label: {
     padding: {
@@ -59,9 +60,14 @@ const Checkbox = ({ spacing, colors, borders, radii, fontSizes }) => ({
     }
   },
   disabled: {
-    backgroundColor: colors.elements.lineAndBorders,
+    backgroundColor: colors.white,
     border: {
-      color: colors.elements.lineAndBorders
+      color: colors.steady
+    },
+    label: {
+      font: {
+        color: colors.steady
+      }
     }
   }
 });

package/cjs/Checkbox/native/Checkbox.js

@@ -121,12 +121,12 @@ const CheckBackground = import_styled_components.default.View(
     error,
     theme: {
       yoga: {
-        colors: { primary, feedback, elements, white },
+        colors: { primary, feedback, white },
         components: { checkbox }
       }
     }
   }) => {
-    let borderColor = primary;
+    let borderColor = checkbox.border.color;
     let bgColor = "transparent";
     if (error) {
       [, borderColor] = feedback.attention;
@@ -137,7 +137,6 @@ const CheckBackground = import_styled_components.default.View(
       borderColor = checkbox.disabled.border.color;
       if (checked) {
         bgColor = checkbox.disabled.backgroundColor;
-        borderColor = elements.lineAndBorders;
       }
     } else if (checked) {
       borderColor = primary;

package/cjs/Checkbox/web/Checkbox.js

@@ -97,12 +97,12 @@ const CheckMark = import_styled_components.default.div.attrs(({ checked, disable
   indeterminate,
   theme: {
     yoga: {
-      colors: { primary, feedback, elements, white },
+      colors: { primary, feedback, white },
       components: { checkbox }
     }
   }
 }) => {
-  let borderColor = elements.selectionAndIcons;
+  let borderColor = checkbox.border.color;
   let bgColor = "transparent";
   let checkColor = checkbox.checked.icon.color;
   if (error) {
@@ -114,7 +114,7 @@ const CheckMark = import_styled_components.default.div.attrs(({ checked, disable
     borderColor = checkbox.disabled.border.color;
     if (checked || indeterminate) {
       bgColor = checkbox.disabled.backgroundColor;
-      borderColor = elements.lineAndBorders;
+      borderColor = checkbox.disabled.border.color;
     }
   } else if (checked || indeterminate) {
     borderColor = primary;
@@ -160,15 +160,22 @@ const Label = import_styled_components.default.label`
   cursor: pointer;
 
   ${({
+  disabled,
   theme: {
     yoga: {
       components: { checkbox }
     }
   }
-}) => `
-    font-size: ${checkbox.label.font.size}px;
-    color: ${checkbox.label.font.color};
-  `}
+}) => {
+  let { color } = checkbox.label.font;
+  if (disabled && checkbox.disabled.label) {
+    color = checkbox.disabled.label.font.color;
+  }
+  return `
+      font-size: ${checkbox.label.font.size}px;
+      color: ${color};
+    `;
+}}
 `;
 const Shadow = import_styled_components.default.span`
   position: absolute;
@@ -334,7 +341,7 @@ const Checkbox = (_a) => {
             indeterminate,
             inverted,
             disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, { id: checkboxLabelId, children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, { id: checkboxLabelId, disabled, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shadow, {}),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 CheckMark,

package/cjs/Input/native/Helper.js

@@ -71,7 +71,7 @@ const Info = (0, import_styled_components.default)(import_Text.default.Caption)(
     font-family: ${baseFont.family};
     color: ${input.helper.color.default};
 
-    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${disabled ? `color: ${colors.steady};` : ""}
     ${focused ? `color: ${input.helper.color.focus};` : ""}
     ${error ? `color: ${colors.feedback.attention.dark};` : ""}
   `

package/cjs/Input/native/Input.js

@@ -121,8 +121,8 @@ const Field = import_styled_components.default.TextInput(
     ${error ? `border-color: ${colors.feedback.attention[1]};` : ""}
 
     ${disabled ? `
-          border-color: ${colors.elements.lineAndBorders};
-          color: ${colors.text.disabled};
+          border-color: ${colors.steady};
+          color: ${colors.steady};
         ` : ""}
   `
 );
@@ -176,7 +176,7 @@ const Label = (0, import_styled_components.default)(import_react_native.Animated
       ` : ""}
 
     ${error ? `color: ${colors.feedback.attention[1]};` : ""}
-    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${disabled ? `color: ${colors.steady};` : ""}
   `
 );
 const CloseIcon = import_styled_components.default.View(
@@ -253,7 +253,7 @@ const Input = import_react.default.forwardRef(
     }, [value]);
     const iconColor = () => {
       if (disabled) {
-        return colors.elements.backgroundAndDisabled;
+        return colors.steady;
       }
       if (focused) {
         return input.font.color.focus;

package/cjs/Input/native/Password.js

@@ -123,7 +123,7 @@ const Password = import_react.default.forwardRef(
     const [focused, setFocused] = (0, import_react.useState)(false);
     const iconColor = () => {
       if (disabled) {
-        return colors.elements.backgroundAndDisabled;
+        return colors.steady;
       }
       if (focused) {
         return input.font.color.focus;

package/cjs/Input/web/Field.js

@@ -114,8 +114,8 @@ const Field = import_styled_components.default.input`
 
     &:disabled {
       cursor: not-allowed;
-      color: ${colors.text.disabled};
-      -webkit-text-fill-color: ${colors.text.disabled};
+      color: ${colors.steady};
+      -webkit-text-fill-color: ${colors.steady};
       opacity: 1;
     }
 

package/cjs/Input/web/Fieldset.js

@@ -63,7 +63,7 @@ const Fieldset = import_styled_components.default.fieldset`
 
     ${value && !error ? `border-color: ${input.border.color.typed};` : ""}
 
-    ${disabled ? `border-color: ${colors.elements.lineAndBorders};` : ""}
+    ${disabled ? `border-color: ${colors.steady};` : ""}
 
     &:hover, &:focus-within {
       &:not(:disabled) {

package/cjs/Input/web/Helper.js

@@ -70,7 +70,7 @@ const Wrapper = import_styled_components.default.div`
     margin-top: ${input.helper.margin.top}px;
 
     color: ${error ? colors.feedback.attention[1] : input.helper.color.default};
-    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${disabled ? `color: ${colors.steady};` : ""}
   `}
 `;
 const Info = (0, import_styled_components.default)(import_Text.default.Caption)`

package/cjs/Input/web/Input.js

@@ -116,7 +116,7 @@ const IconWrapper = import_styled_components.default.div`
       cursor: not-allowed;
       pointer-events: none;
       svg {
-        fill: ${colors.text.disabled};
+        fill: ${colors.steady};
       }
     ` : ""}
   `}

package/cjs/Input/web/Label.js

@@ -62,7 +62,7 @@ const Label = import_styled_components.default.label`
     transition-duration: ${transition.duration[1]}ms;
     transition-timing-function: cubic-bezier(${transition.timing[0].join()});
 
-    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${disabled ? `color: ${colors.steady};` : ""}
   `}
 `;
 var Label_default = Label;

package/cjs/Input/web/Password.js

@@ -124,7 +124,7 @@ const IconWrapper = import_styled_components.default.div`
       fill: ${input.font.color.default};
 
       ${disabled ? `
-            fill: ${colors.elements.backgroundAndDisabled};
+            fill: ${colors.steady};
             pointer-events: none;` : ""}
     }
   `}

package/cjs/Input/web/Phone.style.js

@@ -101,7 +101,7 @@ const labelStateColors = ({
     yoga: { colors }
   }
 }) => import_styled_components.css`
-  ${disabled ? `color: ${colors.text.disabled};` : ""}
+  ${disabled ? `color: ${colors.steady};` : ""}
   ${error ? `color: ${colors.feedback.attention[1]};` : ""}
 `;
 const Container = import_styled_components.default.div`
@@ -164,7 +164,7 @@ const Container = import_styled_components.default.div`
         width: 100%;
         outline: none;
         grid-area: input;
-        color: ${disabled ? colors.text.disabled : input.font.color.focus};
+        color: ${disabled ? colors.steady : input.font.color.focus};
         font-family: ${baseFont.family}, sans-serif;
         font-size: ${input.font.size}px;
         padding-left: ${spacing.xsmall}px;

package/esm/Checkbox/Checkbox.theme.js

@@ -5,7 +5,8 @@ const Checkbox = ({ spacing, colors, borders, radii, fontSizes }) => ({
   },
   border: {
     width: borders.medium,
-    radius: radii.xsmall
+    radius: radii.xsmall,
+    color: colors.mediumNew
   },
   label: {
     padding: {
@@ -36,9 +37,14 @@ const Checkbox = ({ spacing, colors, borders, radii, fontSizes }) => ({
     }
   },
   disabled: {
-    backgroundColor: colors.elements.lineAndBorders,
+    backgroundColor: colors.white,
     border: {
-      color: colors.elements.lineAndBorders
+      color: colors.steady
+    },
+    label: {
+      font: {
+        color: colors.steady
+      }
     }
   }
 });

package/esm/Checkbox/native/Checkbox.js

@@ -90,12 +90,12 @@ const CheckBackground = styled.View(
     error,
     theme: {
       yoga: {
-        colors: { primary, feedback, elements, white },
+        colors: { primary, feedback, white },
         components: { checkbox }
       }
     }
   }) => {
-    let borderColor = primary;
+    let borderColor = checkbox.border.color;
     let bgColor = "transparent";
     if (error) {
       [, borderColor] = feedback.attention;
@@ -106,7 +106,6 @@ const CheckBackground = styled.View(
       borderColor = checkbox.disabled.border.color;
       if (checked) {
         bgColor = checkbox.disabled.backgroundColor;
-        borderColor = elements.lineAndBorders;
       }
     } else if (checked) {
       borderColor = primary;

package/esm/Checkbox/web/Checkbox.js

@@ -66,12 +66,12 @@ const CheckMark = styled.div.attrs(({ checked, disabled }) => ({
   indeterminate,
   theme: {
     yoga: {
-      colors: { primary, feedback, elements, white },
+      colors: { primary, feedback, white },
       components: { checkbox }
     }
   }
 }) => {
-  let borderColor = elements.selectionAndIcons;
+  let borderColor = checkbox.border.color;
   let bgColor = "transparent";
   let checkColor = checkbox.checked.icon.color;
   if (error) {
@@ -83,7 +83,7 @@ const CheckMark = styled.div.attrs(({ checked, disabled }) => ({
     borderColor = checkbox.disabled.border.color;
     if (checked || indeterminate) {
       bgColor = checkbox.disabled.backgroundColor;
-      borderColor = elements.lineAndBorders;
+      borderColor = checkbox.disabled.border.color;
     }
   } else if (checked || indeterminate) {
     borderColor = primary;
@@ -129,15 +129,22 @@ const Label = styled.label`
   cursor: pointer;
 
   ${({
+  disabled,
   theme: {
     yoga: {
       components: { checkbox }
     }
   }
-}) => `
-    font-size: ${checkbox.label.font.size}px;
-    color: ${checkbox.label.font.color};
-  `}
+}) => {
+  let { color } = checkbox.label.font;
+  if (disabled && checkbox.disabled.label) {
+    color = checkbox.disabled.label.font.color;
+  }
+  return `
+      font-size: ${checkbox.label.font.size}px;
+      color: ${color};
+    `;
+}}
 `;
 const Shadow = styled.span`
   position: absolute;
@@ -303,7 +310,7 @@ const Checkbox = (_a) => {
             indeterminate,
             inverted,
             disabled,
-            children: /* @__PURE__ */ jsxs(Label, { id: checkboxLabelId, children: [
+            children: /* @__PURE__ */ jsxs(Label, { id: checkboxLabelId, disabled, children: [
               /* @__PURE__ */ jsx(Shadow, {}),
               /* @__PURE__ */ jsxs(
                 CheckMark,

package/esm/Input/native/Helper.js

@@ -38,7 +38,7 @@ const Info = styled(Text.Caption)(
     font-family: ${baseFont.family};
     color: ${input.helper.color.default};
 
-    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${disabled ? `color: ${colors.steady};` : ""}
     ${focused ? `color: ${input.helper.color.focus};` : ""}
     ${error ? `color: ${colors.feedback.attention.dark};` : ""}
   `

package/esm/Input/native/Input.js

@@ -98,8 +98,8 @@ const Field = styled.TextInput(
     ${error ? `border-color: ${colors.feedback.attention[1]};` : ""}
 
     ${disabled ? `
-          border-color: ${colors.elements.lineAndBorders};
-          color: ${colors.text.disabled};
+          border-color: ${colors.steady};
+          color: ${colors.steady};
         ` : ""}
   `
 );
@@ -153,7 +153,7 @@ const Label = styled(Animated.Text)(
       ` : ""}
 
     ${error ? `color: ${colors.feedback.attention[1]};` : ""}
-    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${disabled ? `color: ${colors.steady};` : ""}
   `
 );
 const CloseIcon = styled.View(
@@ -230,7 +230,7 @@ const Input = React.forwardRef(
     }, [value]);
     const iconColor = () => {
       if (disabled) {
-        return colors.elements.backgroundAndDisabled;
+        return colors.steady;
       }
       if (focused) {
         return input.font.color.focus;

package/esm/Input/native/Password.js

@@ -92,7 +92,7 @@ const Password = React.forwardRef(
     const [focused, setFocused] = useState(false);
     const iconColor = () => {
       if (disabled) {
-        return colors.elements.backgroundAndDisabled;
+        return colors.steady;
       }
       if (focused) {
         return input.font.color.focus;

package/esm/Input/web/Field.js

@@ -81,8 +81,8 @@ const Field = styled.input`
 
     &:disabled {
       cursor: not-allowed;
-      color: ${colors.text.disabled};
-      -webkit-text-fill-color: ${colors.text.disabled};
+      color: ${colors.steady};
+      -webkit-text-fill-color: ${colors.steady};
       opacity: 1;
     }
 

package/esm/Input/web/Fieldset.js

@@ -30,7 +30,7 @@ const Fieldset = styled.fieldset`
 
     ${value && !error ? `border-color: ${input.border.color.typed};` : ""}
 
-    ${disabled ? `border-color: ${colors.elements.lineAndBorders};` : ""}
+    ${disabled ? `border-color: ${colors.steady};` : ""}
 
     &:hover, &:focus-within {
       &:not(:disabled) {

package/esm/Input/web/Helper.js

@@ -38,7 +38,7 @@ const Wrapper = styled.div`
     margin-top: ${input.helper.margin.top}px;
 
     color: ${error ? colors.feedback.attention[1] : input.helper.color.default};
-    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${disabled ? `color: ${colors.steady};` : ""}
   `}
 `;
 const Info = styled(Text.Caption)`

package/esm/Input/web/Input.js

@@ -94,7 +94,7 @@ const IconWrapper = styled.div`
       cursor: not-allowed;
       pointer-events: none;
       svg {
-        fill: ${colors.text.disabled};
+        fill: ${colors.steady};
       }
     ` : ""}
   `}

package/esm/Input/web/Label.js

@@ -29,7 +29,7 @@ const Label = styled.label`
     transition-duration: ${transition.duration[1]}ms;
     transition-timing-function: cubic-bezier(${transition.timing[0].join()});
 
-    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${disabled ? `color: ${colors.steady};` : ""}
   `}
 `;
 var Label_default = Label;

package/esm/Input/web/Password.js

@@ -93,7 +93,7 @@ const IconWrapper = styled.div`
       fill: ${input.font.color.default};
 
       ${disabled ? `
-            fill: ${colors.elements.backgroundAndDisabled};
+            fill: ${colors.steady};
             pointer-events: none;` : ""}
     }
   `}

package/esm/Input/web/Phone.style.js

@@ -68,7 +68,7 @@ const labelStateColors = ({
     yoga: { colors }
   }
 }) => css`
-  ${disabled ? `color: ${colors.text.disabled};` : ""}
+  ${disabled ? `color: ${colors.steady};` : ""}
   ${error ? `color: ${colors.feedback.attention[1]};` : ""}
 `;
 const Container = styled.div`
@@ -131,7 +131,7 @@ const Container = styled.div`
         width: 100%;
         outline: none;
         grid-area: input;
-        color: ${disabled ? colors.text.disabled : input.font.color.focus};
+        color: ${disabled ? colors.steady : input.font.color.focus};
         font-family: ${baseFont.family}, sans-serif;
         font-size: ${input.font.size}px;
         padding-left: ${spacing.xsmall}px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.139.1",
+  "version": "7.141.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -45,7 +45,7 @@
     "react-phone-input-2": "^2.15.1"
   },
   "devDependencies": {
-    "@gympass/yoga-icons": "^1.42.1",
+    "@gympass/yoga-icons": "^1.43.0",
     "@react-native-community/eslint-config": "^3.0.1",
     "@types/styled-components": "^5.1.34",
     "babel-plugin-inline-react-svg": "^1.1.1",
@@ -59,7 +59,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "576cc3f79bc01334ec5ddfafc4772fdf1214c438",
+  "gitHead": "469252db0b93fed37bf5de82866ea0dfd2ad9fc6",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

package/typings/Theme/theme/theme.d.ts

@@ -505,6 +505,7 @@ declare const composeTheme: (tokens: typeof yogaTokens, customTheming?: {}) => {
             border: {
                 width: any;
                 radius: any;
+                color: any;
             };
             label: {
                 padding: {
@@ -539,6 +540,11 @@ declare const composeTheme: (tokens: typeof yogaTokens, customTheming?: {}) => {
                 border: {
                     color: any;
                 };
+                label: {
+                    font: {
+                        color: any;
+                    };
+                };
             };
         };
         checkboxswitch: {