@telus-uds/theme-public-mobile 2.11.0 → 2.13.0

package/build/ios/TagsItem.json

@@ -0,0 +1,265 @@
+{
+  "appearances": {
+    "inactive": {
+      "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
+      "values": [true],
+      "type": "state"
+    },
+    "pressed": {
+      "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+      "values": [true, false],
+      "type": "state"
+    },
+    "selected": {
+      "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
+      "values": [true],
+      "type": "state"
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "icon": "PaletteIconXMark",
+        "iconBackground": {
+          "red": 0.16863,
+          "green": 0.19216,
+          "blue": 0.27059,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "outerBorderWidth": 0
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.16863,
+          "green": 0.19216,
+          "blue": 0.27059,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 1,
+        "color": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
+        "iconBackground": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 0.16863,
+          "green": 0.19216,
+          "blue": 0.27059,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "outerBorderWidth": 0
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.16863,
+          "green": 0.19216,
+          "blue": 0.27059,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 1,
+        "color": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
+        "iconBackground": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 0.16863,
+          "green": 0.19216,
+          "blue": 0.27059,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "outerBorderWidth": 0
+      }
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0.61176,
+          "green": 0.62353,
+          "blue": 0.66667,
+          "alpha": 1
+        },
+        "borderWidth": 1,
+        "color": {
+          "red": 0.80392,
+          "green": 0.81176,
+          "blue": 0.83529,
+          "alpha": 1
+        },
+        "iconBackground": {
+          "red": 0.80392,
+          "green": 0.81176,
+          "blue": 0.83529,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "alignSelf": "center",
+    "backgroundColor": {
+      "red": 0.98824,
+      "green": 0.97255,
+      "blue": 0.93333,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0.38824,
+      "green": 0.42353,
+      "blue": 0.54902,
+      "alpha": 1
+    },
+    "borderRadius": 32,
+    "borderWidth": 1,
+    "color": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "fontName": "SofiaPro",
+    "fontSize": 18,
+    "fontWeight": 700,
+    "icon": "PaletteIconAdd",
+    "iconAlignSelf": "center",
+    "iconBackground": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "iconBorderRadius": 48,
+    "iconColor": {
+      "red": 0.97647,
+      "green": 0.94902,
+      "blue": 0.86667,
+      "alpha": 1
+    },
+    "iconPadding": 2,
+    "iconPosition": "right",
+    "iconSize": 16,
+    "iconSpace": 1,
+    "iconTranslateX": 0,
+    "iconTranslateY": 0,
+    "lineHeight": 1.4285714285714286,
+    "minWidth": 0,
+    "opacity": 1,
+    "outerBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderGap": 2,
+    "outerBorderWidth": 0,
+    "paddingBottom": 10,
+    "paddingLeft": 11,
+    "paddingRight": 11,
+    "paddingTop": 10,
+    "shadow": null,
+    "textAlign": "center"
+  }
+}

package/build/ios/TermsAndConditions.json

@@ -0,0 +1,116 @@
+{
+  "appearances": {
+    "expanded": {
+      "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+      "values": [true, false],
+      "type": "state"
+    },
+    "viewport": {
+      "description": "The size label for the current screen viewport based on the current screen width",
+      "values": ["xs", "sm", "md", "lg", "xl"],
+      "type": "state"
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "viewport": ["xs", "sm"]
+      },
+      "tokens": {
+        "expandContentPaddingRight": 24,
+        "listMarginLeft": 4,
+        "titlePaddingLeft": 4
+      }
+    },
+    {
+      "if": {
+        "expanded": true
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronUp"
+      }
+    }
+  ],
+  "tokens": {
+    "contentBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "contentMarginBottom": 0,
+    "contentPaddingBottom": 8,
+    "contentPaddingLeft": 16,
+    "dividerColor": {
+      "red": 0.61176,
+      "green": 0.62353,
+      "blue": 0.66667,
+      "alpha": 1
+    },
+    "expandBaseBorderWidth": 0,
+    "expandContentPaddingBottom": 16,
+    "expandContentPaddingLeft": 16,
+    "expandContentPaddingRight": 16,
+    "expandContentPaddingTop": 16,
+    "expandIconContainerAlignItems": "center",
+    "expandIconContainerBorder": 0,
+    "expandIconContainerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "expandIconContainerHeight": 32,
+    "expandIconContainerJustifyContent": "center",
+    "expandIconContainerMarginX": 0,
+    "expandIconContainerMarginY": 12,
+    "expandIconContainerWidth": 32,
+    "expandTitleBorder": 0,
+    "expandTitleBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "expandTitleColor": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "expandTitleFontName": "SofiaPro",
+    "expandTitleFontSize": 16,
+    "expandTitleFontWeight": 700,
+    "expandTitleLineHeight": 1.5,
+    "expandTitleMarginX": 4,
+    "expandTitleMarginY": 0,
+    "expandTitlePaddingLeft": 0,
+    "expandTitleUnderline": "none",
+    "icon": "PaletteIconChevronDown",
+    "listColor": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "listFontName": "SofiaPro",
+    "listFontSize": 16,
+    "listFontWeight": 400,
+    "listLineHeight": 1.5,
+    "listMarginBottom": 16,
+    "listMarginLeft": 32,
+    "mdContentPaddingBottom": 16,
+    "mdContentPaddingLeft": 48,
+    "orderedPadding": 0,
+    "titleColor": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "titleFontSize": 16,
+    "titleLineHeight": 1.5,
+    "titlePaddingLeft": 32,
+    "unorderedPadding": 12
+  }
+}

package/build/ios/Testimonial.json

@@ -0,0 +1,47 @@
+{
+  "appearances": {},
+  "rules": [],
+  "tokens": {
+    "additionalFontName": "SofiaPro",
+    "additionalFontSize": 14,
+    "additionalFontWeight": 400,
+    "additionalLineHeight": 1.4285714285714286,
+    "authorFontName": "SofiaPro",
+    "authorFontSize": 18,
+    "authorFontWeight": 700,
+    "authorLineHeight": 1.55555555,
+    "dividerBackgroundColor": {
+      "red": 0.61176,
+      "green": 0.62353,
+      "blue": 0.66667,
+      "alpha": 1
+    },
+    "dividerBorder": 1,
+    "figcaptionGap": 12,
+    "icon": "PaletteIconQuoteLeft",
+    "iconColor": {
+      "red": 0.61176,
+      "green": 0.62353,
+      "blue": 0.66667,
+      "alpha": 1
+    },
+    "iconFr": "PaletteIconQuoteLeftArrow",
+    "imageSize": 48,
+    "quoteContainerGap": 4,
+    "testimonialContainerGap": 12,
+    "testimonialFontNameHeading": "SofiaPro",
+    "testimonialFontNameLarge": "SofiaPro",
+    "testimonialFontSizeHeading": 30,
+    "testimonialFontSizeLarge": 20,
+    "testimonialFontWeightHeading": 700,
+    "testimonialFontWeightLarge": 400,
+    "testimonialLineHeightHeading": 1.2,
+    "testimonialLineHeightLarge": 1.4,
+    "textColor": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    }
+  }
+}

package/build/ios/TextArea.json

@@ -0,0 +1,8 @@
+{
+  "appearances": {},
+  "rules": [],
+  "tokens": {
+    "maxLines": 8,
+    "minLines": 5
+  }
+}

package/build/ios/TextInput.json

@@ -0,0 +1,179 @@
+{
+  "appearances": {
+    "focus": {
+      "description": "Focus states for some input elements are well supported across web, RN, ios and android",
+      "values": [true],
+      "type": "state"
+    },
+    "inactive": {
+      "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
+      "values": [true],
+      "type": "state"
+    },
+    "numeric": {
+      "description": "capability to only allow numbers",
+      "type": "variant",
+      "values": [true]
+    },
+    "password": {
+      "description": "password mask and unmask",
+      "type": "variant",
+      "values": [true]
+    },
+    "validation": {
+      "description": "Validation states for form inputs",
+      "values": ["error", "success", "warning"],
+      "type": "state"
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "validation": "success"
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.16863,
+          "green": 0.5098,
+          "blue": 0.43137,
+          "alpha": 1
+        },
+        "icon": "PaletteIconCheckMark",
+        "iconColor": {
+          "red": 0.16863,
+          "green": 0.5098,
+          "blue": 0.43137,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "validation": "error"
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.74902,
+          "green": 0.0902,
+          "blue": 0.13333,
+          "alpha": 1
+        },
+        "icon": "PaletteIconXMarkCircle",
+        "iconColor": {
+          "red": 0.74902,
+          "green": 0.0902,
+          "blue": 0.13333,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "focus": true
+      },
+      "tokens": {
+        "icon": null,
+        "outerBackgroundColor": {
+          "red": 0.95294,
+          "green": 0.61569,
+          "blue": 0.50196,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0.95294,
+          "green": 0.61569,
+          "blue": 0.50196,
+          "alpha": 1
+        },
+        "outerBorderWidth": 2
+      }
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.80392,
+          "green": 0.81176,
+          "blue": 0.83529,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.80392,
+          "green": 0.81176,
+          "blue": 0.83529,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.61176,
+          "green": 0.62353,
+          "blue": 0.66667,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "amexIcon": "PaletteIconAmex",
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "borderWidth": 1,
+    "buttonSize": 32,
+    "buttonsGap": 1,
+    "buttonsPaddingRight": 10,
+    "clearButtonIcon": "PaletteIconEyeUnmasked",
+    "color": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "defaultCreditIcon": "PaletteIconCreditCard",
+    "fontName": "SofiaPro",
+    "fontSize": 16,
+    "fontWeight": 400,
+    "icon": null,
+    "iconColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "iconSize": 24,
+    "leftIconPaddingBottom": 5,
+    "lineHeight": 1.5,
+    "masterCardIcon": "PaletteIconMasterCard",
+    "outerBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderWidth": 2,
+    "paddingBottom": 10,
+    "paddingLeft": 16,
+    "paddingRight": 16,
+    "paddingTop": 10,
+    "passwordHideButtonIcon": "PaletteIconEyeMasked",
+    "passwordShowButtonIcon": "PaletteIconEyeUnmasked",
+    "visaIcon": "PaletteIconVisa"
+  }
+}

package/build/ios/Timeline.json

@@ -0,0 +1,67 @@
+{
+  "appearances": {
+    "horizontal": {
+      "description": "Use horizontal to display timeline horizontally.",
+      "type": "variant",
+      "values": [true]
+    },
+    "viewport": {
+      "description": "The size label for the current screen viewport based on the current screen width",
+      "values": ["xs", "sm", "md", "lg", "xl"],
+      "type": "state"
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "horizontal": true,
+        "viewport": ["lg", "xl"]
+      },
+      "tokens": {
+        "connectorHeight": 1,
+        "connectorWidth": "100%",
+        "itemContentMarginBottom": 0,
+        "itemContentMarginRight": 32,
+        "lineItemContainerDirection": "column",
+        "lineItemDirection": "row",
+        "lineItemMarginBottom": 24,
+        "lineItemMarginRight": 0,
+        "timelineContainerDirection": "row"
+      }
+    }
+  ],
+  "tokens": {
+    "connectorHeight": "100%",
+    "connectorWidth": 1,
+    "dotBorderWidth": 1,
+    "dotColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "dotWidth": 14,
+    "itemContentFlexSize": 1,
+    "itemContentMarginBottom": 32,
+    "itemContentMarginRight": 0,
+    "lineContainerFlexSize": 1,
+    "lineItemAlign": "center",
+    "lineItemContainerDirection": "row",
+    "lineItemDirection": "column",
+    "lineItemMarginBottom": 0,
+    "lineItemMarginRight": 24,
+    "timelineColor": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "timelineConnectorColor": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "timelineContainerDirection": "column"
+  }
+}