@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/ios/Radio.json

@@ -0,0 +1,150 @@
+{
+  "appearances": {
+    "checked": {
+      "description": "Corresponds to a selected state for a checkbox or radio",
+      "values": [true],
+      "type": "state"
+    },
+    "error": {
+      "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"
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "error": true
+      },
+      "tokens": {}
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "inputBackgroundColor": {
+          "red": 0.8902,
+          "green": 0.90196,
+          "blue": 0.9098,
+          "alpha": 1
+        },
+        "inputBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "labelColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "checked": true,
+        "inactive": true
+      },
+      "tokens": {
+        "checkedBackgroundColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "inputBackgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "inputBorderColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "labelColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "checkedBackgroundColor": {
+      "red": 0.48627,
+      "green": 0.32549,
+      "blue": 0.64706,
+      "alpha": 1
+    },
+    "checkedSize": 12,
+    "containerBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "containerBorderRadius": 0,
+    "containerOpacity": 1,
+    "containerPaddingBottom": 0,
+    "containerPaddingLeft": 2,
+    "containerPaddingRight": 0,
+    "containerPaddingTop": 0,
+    "containerShadow": null,
+    "descriptionFontName": "HelveticaNow",
+    "descriptionFontSize": 14,
+    "descriptionFontWeight": 400,
+    "descriptionLineHeight": 1.42857142857,
+    "descriptionMarginLeft": null,
+    "inputBackgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "inputBorderColor": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "inputBorderWidth": 1,
+    "inputOutlineColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "inputOutlineWidth": 0,
+    "inputSize": 20,
+    "labelColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "labelFontName": "HelveticaNow",
+    "labelFontSize": 16,
+    "labelFontWeight": 400,
+    "labelLineHeight": 1.5,
+    "labelMarginLeft": 10,
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderGap": 0,
+    "outerBorderWidth": 2
+  }
+}

package/build/ios/RadioCard.json

@@ -0,0 +1,259 @@
+{
+  "appearances": {
+    "checked": {
+      "description": "Corresponds to a selected state for a checkbox or radio",
+      "values": [true],
+      "type": "state"
+    },
+    "error": {
+      "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"
+    },
+    "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"
+    },
+    "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": {
+        "fontSize": 24,
+        "lineHeight": 1.33333333333,
+        "paddingBottom": 24,
+        "paddingLeft": 16,
+        "paddingRight": 24,
+        "paddingTop": 16
+      }
+    },
+    {
+      "description": "Pressed state matches hover state plus light grey background",
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.95686,
+          "green": 0.95686,
+          "blue": 0.96863,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0.8902,
+          "green": 0.90196,
+          "blue": 0.9098,
+          "alpha": 1
+        },
+        "outerBorderGap": 0,
+        "radioInputBorderColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "radioInputBorderWidth": 1,
+        "radioOuterBorderColor": {
+          "red": 0.8902,
+          "green": 0.90196,
+          "blue": 0.9098,
+          "alpha": 1
+        },
+        "radioOuterBorderWidth": 3
+      }
+    },
+    {
+      "if": {
+        "checked": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.48627,
+          "green": 0.32549,
+          "blue": 0.64706,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "error": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        },
+        "radioInputBorderColor": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.95686,
+          "green": 0.95686,
+          "blue": 0.96863,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "radioCheckedBackgroundColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "radioInputBackgroundColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "radioInputBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "radioInputSize": 12,
+        "radioOuterBorderColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "radioOuterBorderGap": 2,
+        "radioOuterBorderWidth": 1
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0.69804,
+      "green": 0.72549,
+      "blue": 0.74902,
+      "alpha": 1
+    },
+    "borderRadius": 6,
+    "borderWidth": 1,
+    "color": {
+      "red": 0.17255,
+      "green": 0.18039,
+      "blue": 0.18824,
+      "alpha": 1
+    },
+    "contentAlignItems": "stretch",
+    "contentFlexGrow": 0,
+    "contentFlexShrink": 1,
+    "contentJustifyContent": "flex-start",
+    "contentSpace": 2,
+    "flex": 1,
+    "fontName": "HelveticaNow",
+    "fontSize": 20,
+    "fontWeight": 500,
+    "letterSpacing": 0,
+    "lineHeight": 1.4,
+    "minWidth": 264,
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderGap": 0,
+    "outerBorderWidth": 2,
+    "paddingBottom": 16,
+    "paddingLeft": 10,
+    "paddingRight": 16,
+    "paddingTop": 16,
+    "radioCheckedBackgroundColor": {
+      "red": 0.48627,
+      "green": 0.32549,
+      "blue": 0.64706,
+      "alpha": 1
+    },
+    "radioCheckedSize": 12,
+    "radioInputBackgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "radioInputBorderColor": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "radioInputBorderWidth": 1,
+    "radioInputOutlineColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "radioInputOutlineWidth": 0,
+    "radioInputSize": 20,
+    "radioOuterBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "radioOuterBorderGap": 0,
+    "radioOuterBorderWidth": 0,
+    "radioSpace": 2,
+    "shadow": null,
+    "textTransform": "none"
+  }
+}

package/build/ios/RadioCardGroup.json

@@ -0,0 +1,38 @@
+{
+  "appearances": {
+    "fullWidth": {
+      "description": "Makes cards always occupy the full width of the parent, regardless of viewport",
+      "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": {
+        "fullWidth": null,
+        "viewport": ["md", "lg", "xl"]
+      },
+      "tokens": {
+        "direction": "row",
+        "space": 5
+      }
+    }
+  ],
+  "tokens": {
+    "borderBottomLeftRadius": 1,
+    "borderBottomRightRadius": 1,
+    "borderTopLeftRadius": 1,
+    "borderTopRightRadius": 1,
+    "direction": "column",
+    "fieldSpace": 3,
+    "outlineOffset": 8,
+    "outlineWidth": 1,
+    "showIcon": true,
+    "space": 3
+  }
+}

package/build/ios/RadioGroup.json

@@ -0,0 +1,15 @@
+{
+  "appearances": {},
+  "rules": [],
+  "tokens": {
+    "borderBottomLeftRadius": 1,
+    "borderBottomRightRadius": 1,
+    "borderTopLeftRadius": 1,
+    "borderTopRightRadius": 1,
+    "fieldSpace": 2,
+    "outlineOffset": 8,
+    "outlineWidth": 1,
+    "showIcon": true,
+    "space": 2
+  }
+}

package/build/ios/Ribbon.json

@@ -0,0 +1,140 @@
+{
+  "appearances": {
+    "purpose": {
+      "type": "variant",
+      "values": ["offer", "default", "editorial", "subtle"]
+    },
+    "wrap": {
+      "type": "variant",
+      "values": [true]
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "purpose": "editorial"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "curveBackgroundColor": {
+          "red": 0.17255,
+          "green": 0.18039,
+          "blue": 0.18824,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "purpose": "offer"
+      },
+      "tokens": {
+        "gradient": {
+          "type": "linear",
+          "angle": 135,
+          "stops": [
+            {
+              "stop": 0,
+              "color": {
+                "red": 0.29412,
+                "green": 0.15686,
+                "blue": 0.42745,
+                "alpha": 1
+              }
+            },
+            {
+              "stop": 1,
+              "color": {
+                "red": 0.89804,
+                "green": 0.19608,
+                "blue": 0.57647,
+                "alpha": 1
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      "if": {
+        "wrap": true
+      },
+      "tokens": {
+        "paddingLeft": 24,
+        "paddingRight": 24
+      }
+    },
+    {
+      "if": {
+        "purpose": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.48627,
+          "green": 0.32549,
+          "blue": 0.64706,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 0.38039,
+      "green": 0.21961,
+      "blue": 0.53725,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "borderRadiusBottomLeft": null,
+    "borderRadiusBottomRight": null,
+    "boxShadowColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0.1
+    },
+    "boxShadowPaddingBottom": 2,
+    "boxShadowPaddingLeft": 0,
+    "boxShadowPaddingRight": 2,
+    "boxShadowPaddingTop": 0,
+    "curveAfterBackgroundColor": {
+      "red": 0.38039,
+      "green": 0.21961,
+      "blue": 0.53725,
+      "alpha": 1
+    },
+    "curveAfterHeight": 4,
+    "curveAfterRadius": 0,
+    "curveAfterWidth": 8,
+    "curveBackgroundColor": {
+      "red": 0.24706,
+      "green": 0.16471,
+      "blue": 0.32941,
+      "alpha": 1
+    },
+    "curveHeight": 10,
+    "curveMarginTop": 4,
+    "curveWidth": 8,
+    "fontColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "fontName": "HelveticaNow",
+    "fontSize": 12,
+    "fontWeight": 700,
+    "gradient": null,
+    "lineHeight": 1.33333333333,
+    "paddingBottom": 4,
+    "paddingLeft": 8,
+    "paddingRight": 8,
+    "paddingTop": 4
+  }
+}