@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/ios/TabsItem.json

@@ -0,0 +1,301 @@
+{
+  "appearances": {
+    "equalWidth": {
+      "description": "Divide the available width equally among `TabsItem`",
+      "type": "variant",
+      "values": [true]
+    },
+    "focus": {
+      "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"
+    },
+    "hover": {
+      "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"
+    },
+    "inverse": {
+      "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"
+    },
+    "selected": {
+      "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"
+    }
+  },
+  "rules": [
+    {
+      "description": "The design uses height of 3: there's (rightly) no '3' in the Allium palette but the effect is 1px above and below a 1px line",
+      "if": {
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0.05
+        },
+        "color": {
+          "red": 0.29412,
+          "green": 0.15686,
+          "blue": 0.42745,
+          "alpha": 1
+        },
+        "highlightBarBorderRadius": 32,
+        "highlightBarBorderWidth": 1,
+        "highlightBarHeight": 1,
+        "highlightColor": {
+          "red": 0.29412,
+          "green": 0.15686,
+          "blue": 0.42745,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "hover": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "borderWidth": 2
+      }
+    },
+    {
+      "if": {
+        "focus": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.29412,
+          "green": 0.15686,
+          "blue": 0.42745,
+          "alpha": 1
+        },
+        "borderWidth": 2,
+        "color": {
+          "red": 0.29412,
+          "green": 0.15686,
+          "blue": 0.42745,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "focus": true,
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.29412,
+          "green": 0.15686,
+          "blue": 0.42745,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "hover": true,
+        "inverse": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "highlightColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        },
+        "highlightColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        },
+        "highlightColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "focus": true,
+        "inverse": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "highlightColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "equalWidth": true
+      },
+      "tokens": {
+        "maxWidth": null
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "borderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "borderRadius": 32,
+    "borderWidth": 0,
+    "color": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "fontName": "HelveticaNow",
+    "fontScaleCap": 64,
+    "fontSize": 14,
+    "fontWeight": 700,
+    "highlightBarBorderRadius": 0,
+    "highlightBarBorderWidth": 0,
+    "highlightBarHeight": 0,
+    "highlightColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "highlightTriangleSize": 0,
+    "letterSpacing": 0,
+    "lineHeight": 1.14285714286,
+    "maxWidth": 192,
+    "paddingHorizontal": 24,
+    "paddingVertical": 8,
+    "space": 1,
+    "textAlign": "center",
+    "textTransform": "none"
+  }
+}

package/build/ios/Tags.json

@@ -0,0 +1,27 @@
+{
+  "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": "center",
+    "direction": "row",
+    "flexGrow": 0,
+    "flexShrink": 0,
+    "justifyContent": "flex-start",
+    "space": 1
+  }
+}

package/build/ios/TagsItem.json

@@ -0,0 +1,214 @@
+{
+  "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.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "iconBackground": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.29412,
+          "green": 0.15686,
+          "blue": 0.42745,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "icon": "PaletteIconClose",
+        "iconBackground": {
+          "red": 0.48627,
+          "green": 0.32549,
+          "blue": 0.64706,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.24706,
+          "green": 0.16471,
+          "blue": 0.32941,
+          "alpha": 1
+        },
+        "iconBackground": {
+          "red": 0.48627,
+          "green": 0.32549,
+          "blue": 0.64706,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "color": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "iconBackground": {
+          "red": 0.95686,
+          "green": 0.95686,
+          "blue": 0.96863,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "alignSelf": "center",
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0.69804,
+      "green": 0.72549,
+      "blue": 0.74902,
+      "alpha": 1
+    },
+    "borderRadius": 32,
+    "borderWidth": 1,
+    "color": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "fontName": "HelveticaNow",
+    "fontSize": 14,
+    "fontWeight": 700,
+    "icon": "PaletteIconAdd",
+    "iconAlignSelf": "center",
+    "iconBackground": {
+      "red": 0.95686,
+      "green": 0.95686,
+      "blue": 0.96863,
+      "alpha": 1
+    },
+    "iconBorderRadius": 32,
+    "iconColor": {
+      "red": 0.17255,
+      "green": 0.18039,
+      "blue": 0.18824,
+      "alpha": 1
+    },
+    "iconPadding": 2,
+    "iconPosition": "right",
+    "iconSize": 16,
+    "iconSpace": 2,
+    "iconTranslateX": 0,
+    "iconTranslateY": 0,
+    "lineHeight": 1.42857142857,
+    "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": 2,
+    "paddingBottom": 8,
+    "paddingLeft": 16,
+    "paddingRight": 8,
+    "paddingTop": 8,
+    "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": 6,
+        "titlePaddingLeft": 6
+      }
+    },
+    {
+      "if": {
+        "expanded": true
+      },
+      "tokens": {
+        "icon": "PaletteIconCaretUp"
+      }
+    }
+  ],
+  "tokens": {
+    "contentBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "contentMarginBottom": 0,
+    "contentPaddingBottom": 0,
+    "contentPaddingLeft": 16,
+    "dividerColor": {
+      "red": 0.69804,
+      "green": 0.72549,
+      "blue": 0.74902,
+      "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.17255,
+      "green": 0.18039,
+      "blue": 0.18824,
+      "alpha": 1
+    },
+    "expandTitleFontName": "HelveticaNow",
+    "expandTitleFontSize": 16,
+    "expandTitleFontWeight": 500,
+    "expandTitleLineHeight": 1.5,
+    "expandTitleMarginX": 4,
+    "expandTitleMarginY": 0,
+    "expandTitlePaddingLeft": 0,
+    "expandTitleUnderline": "none",
+    "icon": "PaletteIconCaretDown",
+    "listColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "listFontName": "HelveticaNow",
+    "listFontSize": 14,
+    "listFontWeight": 400,
+    "listLineHeight": 1.42857142857,
+    "listMarginBottom": 16,
+    "listMarginLeft": 32,
+    "mdContentPaddingBottom": 16,
+    "mdContentPaddingLeft": 48,
+    "orderedPadding": 0,
+    "titleColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "titleFontSize": 14,
+    "titleLineHeight": 1.42857142857,
+    "titlePaddingLeft": 32,
+    "unorderedPadding": 12
+  }
+}