@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/ios/Testimonial.json

@@ -0,0 +1,65 @@
+{
+  "appearances": {
+    "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": ["md", "lg", "xl"]
+      },
+      "tokens": {
+        "testimonialFontNameHeading": "HelveticaNow",
+        "testimonialFontSizeHeading": 28,
+        "testimonialFontWeightHeading": 400,
+        "testimonialLineHeightHeading": 1.28571428571
+      }
+    }
+  ],
+  "tokens": {
+    "additionalFontName": "HelveticaNow",
+    "additionalFontSize": 14,
+    "additionalFontWeight": 400,
+    "additionalLineHeight": 1.42857142857,
+    "authorFontName": "HelveticaNow",
+    "authorFontSize": 16,
+    "authorFontWeight": 700,
+    "authorLineHeight": 1.5,
+    "dividerBackgroundColor": {
+      "red": 0.69804,
+      "green": 0.72549,
+      "blue": 0.74902,
+      "alpha": 1
+    },
+    "dividerBorder": 1,
+    "figcaptionGap": 12,
+    "icon": "PaletteIconQuoteLeft",
+    "iconColor": {
+      "red": 0.69804,
+      "green": 0.72549,
+      "blue": 0.74902,
+      "alpha": 1
+    },
+    "iconFr": "PaletteIconQuoteLeftArrow",
+    "imageSize": 48,
+    "quoteContainerGap": 4,
+    "testimonialContainerGap": 12,
+    "testimonialFontNameHeading": "HelveticaNow",
+    "testimonialFontNameLarge": "HelveticaNow",
+    "testimonialFontSizeHeading": 24,
+    "testimonialFontSizeLarge": 20,
+    "testimonialFontWeightHeading": 400,
+    "testimonialFontWeightLarge": 400,
+    "testimonialLineHeightHeading": 1.33333333333,
+    "testimonialLineHeightLarge": 1.6,
+    "textColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "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,167 @@
+{
+  "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": "capability that helps masking and unmasking text",
+      "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.50196,
+          "blue": 0,
+          "alpha": 1
+        },
+        "icon": "PaletteIconStatusSuccess",
+        "iconColor": {
+          "red": 0.16863,
+          "green": 0.50196,
+          "blue": 0,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "validation": "error"
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        },
+        "icon": "PaletteIconStatusError",
+        "iconColor": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "focus": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.48627,
+          "green": 0.32549,
+          "blue": 0.64706,
+          "alpha": 1
+        },
+        "borderWidth": 3,
+        "icon": null
+      }
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.95686,
+          "green": 0.95686,
+          "blue": 0.96863,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.95686,
+          "green": 0.95686,
+          "blue": 0.96863,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "amexIcon": "PaletteIconAmex",
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "borderWidth": 1,
+    "buttonSize": 32,
+    "buttonsGap": 1,
+    "buttonsPaddingRight": 8,
+    "clearButtonIcon": "PaletteIconTimes",
+    "color": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "defaultCreditIcon": "PaletteIconCreditCard",
+    "fontName": "HelveticaNow",
+    "fontSize": 16,
+    "fontWeight": 400,
+    "icon": null,
+    "iconColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "iconSize": 24,
+    "leftIconPaddingBottom": 8,
+    "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": 12,
+    "paddingLeft": 16,
+    "paddingRight": 16,
+    "paddingTop": 12,
+    "passwordHideButtonIcon": "PaletteIconInvisible",
+    "passwordShowButtonIcon": "PaletteIconVisible",
+    "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.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "timelineConnectorColor": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "timelineContainerDirection": "column"
+  }
+}

package/build/ios/Toast.json

@@ -0,0 +1,74 @@
+{
+  "appearances": {
+    "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"]
+      },
+      "tokens": {
+        "animationPaddingBottomAfter": 8,
+        "animationPaddingTopAfter": 8
+      }
+    }
+  ],
+  "tokens": {
+    "animationBackgroundColorAfter": {
+      "red": 0.95686,
+      "green": 0.95686,
+      "blue": 0.96863,
+      "alpha": 1
+    },
+    "animationBackgroundColorBefore": {
+      "red": 0.29412,
+      "green": 0.15686,
+      "blue": 0.42745,
+      "alpha": 1
+    },
+    "animationColorAfter": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "animationColorBefore": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "animationDivColorAfter": {
+      "red": 0.16863,
+      "green": 0.50196,
+      "blue": 0,
+      "alpha": 1
+    },
+    "animationDivColorBefore": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "animationHeightAfter": 24,
+    "animationHeightBefore": 0,
+    "animationPaddingBottomAfter": 16,
+    "animationPaddingBottomBefore": 0,
+    "animationPaddingTopAfter": 16,
+    "animationPaddingTopBefore": 0,
+    "chevronlinkFontName": "HelveticaNow",
+    "chevronlinkFontWeight": 400,
+    "containerBackgroundColor": {
+      "red": 0.29412,
+      "green": 0.15686,
+      "blue": 0.42745,
+      "alpha": 1
+    },
+    "containerGap": 10,
+    "padding": 16
+  }
+}

package/build/ios/ToggleSwitch.json

@@ -0,0 +1,213 @@
+{
+  "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": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.17255,
+          "green": 0.18039,
+          "blue": 0.18824,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.16863,
+          "green": 0.50196,
+          "blue": 0,
+          "alpha": 1
+        },
+        "icon": "PaletteIconCheckmark",
+        "iconColor": {
+          "red": 0.16863,
+          "green": 0.50196,
+          "blue": 0,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.08627,
+          "green": 0.24314,
+          "blue": 0.02353,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 0.08627,
+          "green": 0.24314,
+          "blue": 0.02353,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "labelColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "alignSelf": "flex-start",
+    "backgroundColor": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "borderRadius": 32,
+    "borderWidth": 0,
+    "icon": null,
+    "iconColor": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "iconSize": 14,
+    "labelColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "labelFontName": "HelveticaNow",
+    "labelFontSize": 16,
+    "labelFontWeight": 400,
+    "labelLineHeight": 1.5,
+    "labelMarginLeft": 0,
+    "opacity": 1,
+    "outerBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderGap": 0,
+    "outerBorderGapButton": 3,
+    "outerBorderWidth": 0,
+    "paddingBottom": 0,
+    "paddingLeft": 0,
+    "paddingRight": 0,
+    "paddingTop": 0,
+    "shadow": {
+      "inset": true,
+      "offsetX": 0,
+      "offsetY": 2,
+      "blur": 2,
+      "spread": 0,
+      "color": {
+        "red": 0,
+        "green": 0,
+        "blue": 0,
+        "alpha": 0.1
+      }
+    },
+    "space": 2,
+    "switchBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "switchBorderRadius": 32,
+    "switchBorderWidth": 0,
+    "switchColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "switchShadow": {
+      "inset": false,
+      "offsetX": 0,
+      "offsetY": 2,
+      "blur": 2,
+      "spread": 0,
+      "color": {
+        "red": 0,
+        "green": 0,
+        "blue": 0,
+        "alpha": 0.2
+      }
+    },
+    "switchSize": 18,
+    "trackBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "trackBorderRadius": 32,
+    "trackBorderWidth": 3,
+    "trackHeight": 24,
+    "width": 40
+  }
+}

package/build/ios/ToggleSwitchGroup.json

@@ -0,0 +1,28 @@
+{
+  "appearances": {
+    "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": ["lg", "xl"]
+      },
+      "tokens": {
+        "space": 3
+      }
+    }
+  ],
+  "tokens": {
+    "alignItems": "flex-start",
+    "direction": "column",
+    "fieldSpace": 2,
+    "flexGrow": 0,
+    "flexShrink": 0,
+    "justifyContent": "flex-start",
+    "space": 1
+  }
+}

package/build/ios/Tooltip.json

@@ -0,0 +1,68 @@
+{
+  "appearances": {
+    "inverse": {
+      "type": "variant",
+      "values": [true]
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "inverse": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "arrowBorderRadius": 1,
+    "arrowOffset": 4,
+    "arrowWidth": 16,
+    "backgroundColor": {
+      "red": 0.17255,
+      "green": 0.18039,
+      "blue": 0.18824,
+      "alpha": 1
+    },
+    "borderRadius": 8,
+    "color": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "fontName": "HelveticaNow",
+    "fontSize": 14,
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "paddingBottom": 8,
+    "paddingLeft": 16,
+    "paddingRight": 16,
+    "paddingTop": 8,
+    "shadow": {
+      "inset": false,
+      "offsetX": 0,
+      "offsetY": 4,
+      "blur": 8,
+      "spread": 0,
+      "color": {
+        "red": 0,
+        "green": 0,
+        "blue": 0,
+        "alpha": 0.1
+      }
+    }
+  }
+}