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

package/build/android/IconButton.json

@@ -0,0 +1,542 @@
+{
+  "appearances": {
+    "action": {
+      "type": "variant",
+      "values": [
+        "add",
+        "close",
+        "expand",
+        "moveDown",
+        "moveLeft",
+        "moveRight",
+        "moveUp",
+        "play",
+        "subtract"
+      ]
+    },
+    "compact": {
+      "description": "Without the outer border gap",
+      "type": "variant",
+      "values": [true]
+    },
+    "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"
+    },
+    "inverse": {
+      "description": "For use on dark backgrounds",
+      "type": "variant",
+      "values": [true]
+    },
+    "password": {
+      "description": "password mask and unmask",
+      "type": "variant",
+      "values": [true]
+    },
+    "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"
+    },
+    "raised": {
+      "description": "Uses shadow and background colour to appear raised above the page",
+      "type": "variant",
+      "values": [true]
+    },
+    "size": {
+      "type": "variant",
+      "values": ["small", "large"]
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "action": "add"
+      },
+      "tokens": {
+        "icon": "PaletteIconAdd"
+      }
+    },
+    {
+      "if": {
+        "action": "subtract"
+      },
+      "tokens": {
+        "icon": "PaletteIconSubtract"
+      }
+    },
+    {
+      "if": {
+        "action": "close"
+      },
+      "tokens": {
+        "icon": "PaletteIconClose"
+      }
+    },
+    {
+      "if": {
+        "action": "expand"
+      },
+      "tokens": {
+        "icon": "PaletteIconExpand"
+      }
+    },
+    {
+      "if": {
+        "action": "moveDown"
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronDown"
+      }
+    },
+    {
+      "if": {
+        "action": "moveLeft"
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronLeft"
+      }
+    },
+    {
+      "if": {
+        "action": "moveRight"
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronRight"
+      }
+    },
+    {
+      "if": {
+        "action": "moveUp"
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronUp"
+      }
+    },
+    {
+      "if": {
+        "action": "play"
+      },
+      "tokens": {
+        "icon": "PaletteIconPlayVideo"
+      }
+    },
+    {
+      "if": {
+        "action": "add"
+      },
+      "tokens": {
+        "icon": "PaletteIconAdd"
+      }
+    },
+    {
+      "if": {
+        "action": "subtract"
+      },
+      "tokens": {
+        "icon": "PaletteIconSubtract"
+      }
+    },
+    {
+      "if": {
+        "action": "close"
+      },
+      "tokens": {
+        "icon": "PaletteIconClose"
+      }
+    },
+    {
+      "if": {
+        "action": "expand"
+      },
+      "tokens": {
+        "icon": "PaletteIconExpand"
+      }
+    },
+    {
+      "if": {
+        "action": "moveDown"
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronDown"
+      }
+    },
+    {
+      "if": {
+        "action": "moveLeft"
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronLeft"
+      }
+    },
+    {
+      "if": {
+        "action": "moveRight"
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronRight"
+      }
+    },
+    {
+      "if": {
+        "action": "moveUp"
+      },
+      "tokens": {
+        "icon": "PaletteIconChevronUp"
+      }
+    },
+    {
+      "if": {
+        "action": "play"
+      },
+      "tokens": {
+        "icon": "PaletteIconPlayVideo"
+      }
+    },
+    {
+      "if": {
+        "inverse": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "password": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "outerBorderGap": 4
+      }
+    },
+    {
+      "if": {
+        "password": true,
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 1,
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "outerBorderGap": 0,
+        "outerBorderWidth": 0
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "password": true,
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "outerBorderGap": 0,
+        "outerBorderWidth": 0
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.95294,
+          "green": 0.61569,
+          "blue": 0.50196,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0.95294,
+          "green": 0.61569,
+          "blue": 0.50196,
+          "alpha": 1
+        },
+        "outerBorderWidth": 3
+      }
+    },
+    {
+      "if": {
+        "size": "large"
+      },
+      "tokens": {
+        "iconSize": 24,
+        "padding": 12
+      }
+    },
+    {
+      "if": {
+        "size": "small"
+      },
+      "tokens": {
+        "padding": 4
+      }
+    },
+    {
+      "description": "Raised IconButtons follow different design patterns to other variants",
+      "if": {
+        "raised": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 3,
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "outerBorderGap": 0,
+        "outerBorderWidth": 0,
+        "padding": 8,
+        "shadow": {
+          "inset": false,
+          "offsetX": 0,
+          "offsetY": 2,
+          "blur": 2,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0.2
+          }
+        }
+      }
+    },
+    {
+      "if": {
+        "raised": true,
+        "size": "large"
+      },
+      "tokens": {
+        "padding": 12
+      }
+    },
+    {
+      "if": {
+        "raised": true,
+        "size": "small"
+      },
+      "tokens": {
+        "padding": 8
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "raised": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "password": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.61176,
+          "green": 0.62353,
+          "blue": 0.66667,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "outerBorderWidth": 0
+      }
+    },
+    {
+      "if": {
+        "compact": true
+      },
+      "tokens": {
+        "outerBorderGap": 0
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "borderBottomLeftRadius": null,
+    "borderBottomRightRadius": null,
+    "borderBottomWidth": 1,
+    "borderColor": {
+      "red": 0.38824,
+      "green": 0.42353,
+      "blue": 0.54902,
+      "alpha": 1
+    },
+    "borderLeftWidth": 1,
+    "borderRadius": 99999999999999,
+    "borderRightWidth": 1,
+    "borderTopLeftRadius": null,
+    "borderTopRightRadius": null,
+    "borderTopWidth": 1,
+    "borderWidth": 2,
+    "height": null,
+    "icon": "PaletteIconAdd",
+    "iconColor": {
+      "red": 0.38824,
+      "green": 0.42353,
+      "blue": 0.54902,
+      "alpha": 1
+    },
+    "iconScale": 1,
+    "iconSize": 16,
+    "iconTranslateX": 0,
+    "iconTranslateY": 0,
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderGap": 0,
+    "outerBorderWidth": 0,
+    "padding": 4,
+    "shadow": null,
+    "width": null
+  }
+}

package/build/android/Image.json

@@ -0,0 +1,7 @@
+{
+  "appearances": {},
+  "rules": [],
+  "tokens": {
+    "borderRadius": 4
+  }
+}

package/build/android/InputLabel.json

@@ -0,0 +1,27 @@
+{
+  "appearances": {},
+  "rules": [],
+  "tokens": {
+    "color": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "fontName": "SofiaPro",
+    "fontSize": 18,
+    "fontWeight": 400,
+    "gap": 8,
+    "hintColor": {
+      "red": 0.22353,
+      "green": 0.25098,
+      "blue": 0.33725,
+      "alpha": 1
+    },
+    "hintFontName": "SofiaPro",
+    "hintFontSize": 14,
+    "hintFontWeight": 400,
+    "hintLineHeight": 1.4285714285714286,
+    "lineHeight": 1.55555555
+  }
+}

package/build/android/InputSupports.json

@@ -0,0 +1,7 @@
+{
+  "appearances": {},
+  "rules": [],
+  "tokens": {
+    "space": 1
+  }
+}