@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/android/Modal.json

@@ -0,0 +1,194 @@
+{
+  "appearances": {
+    "maxWidth": {
+      "description": "Whether a modal should expand responsively to the maximum of 8 layout columns width",
+      "values": [true],
+      "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"
+    },
+    "width": {
+      "description": "The width of the modal",
+      "values": ["s", "m", "l", "xl"],
+      "type": "state"
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "viewport": ["xs", "sm"]
+      },
+      "tokens": {
+        "direction": "column",
+        "height": "100%",
+        "paddingBottom": 24,
+        "paddingLeft": 24,
+        "paddingRight": 24,
+        "paddingTop": 24
+      }
+    },
+    {
+      "if": {
+        "viewport": ["md", "lg", "xl"]
+      },
+      "tokens": {
+        "containerPaddingBottom": 32,
+        "containerPaddingTop": 32,
+        "direction": "row",
+        "maxWidth": 576
+      }
+    },
+    {
+      "if": {
+        "viewport": ["md", "lg", "xl"],
+        "width": "s"
+      },
+      "tokens": {
+        "containerPaddingBottom": 32,
+        "containerPaddingTop": 32,
+        "maxWidth": 320
+      }
+    },
+    {
+      "if": {
+        "viewport": ["md", "lg", "xl"],
+        "width": "m"
+      },
+      "tokens": {
+        "containerPaddingBottom": 32,
+        "containerPaddingTop": 32,
+        "maxWidth": 480
+      }
+    },
+    {
+      "if": {
+        "viewport": ["lg", "xl"],
+        "width": "l"
+      },
+      "tokens": {
+        "containerPaddingBottom": 32,
+        "containerPaddingTop": 32,
+        "maxWidth": 630
+      }
+    },
+    {
+      "if": {
+        "viewport": "xl",
+        "width": "xl"
+      },
+      "tokens": {
+        "containerPaddingBottom": 32,
+        "containerPaddingTop": 32,
+        "maxWidth": 768
+      }
+    },
+    {
+      "if": {
+        "maxWidth": true,
+        "viewport": "md"
+      },
+      "tokens": {
+        "containerPaddingLeft": 16,
+        "containerPaddingRight": 16,
+        "maxWidth": 480
+      }
+    },
+    {
+      "if": {
+        "maxWidth": true,
+        "viewport": "lg"
+      },
+      "tokens": {
+        "containerPaddingLeft": 16,
+        "containerPaddingRight": 16,
+        "maxWidth": 630
+      }
+    },
+    {
+      "if": {
+        "maxWidth": true,
+        "viewport": "xl"
+      },
+      "tokens": {
+        "containerPaddingLeft": 16,
+        "containerPaddingRight": 16,
+        "maxWidth": 768
+      }
+    }
+  ],
+  "tokens": {
+    "backdropColor": {
+      "red": 0.95686,
+      "green": 0.95686,
+      "blue": 0.96863,
+      "alpha": 0.97
+    },
+    "backdropOpacity": 1,
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0.8902,
+      "green": 0.90196,
+      "blue": 0.9098,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "cancelButtonColor": {
+      "red": 0.16863,
+      "green": 0.50196,
+      "blue": 0,
+      "alpha": 1
+    },
+    "closeIcon": "PaletteIconClose",
+    "closeIconColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "closeIconSize": 16,
+    "closePadding": 4,
+    "containerPaddingBottom": 0,
+    "containerPaddingLeft": 0,
+    "containerPaddingRight": 0,
+    "containerPaddingTop": 0,
+    "direction": "row",
+    "gap": 16,
+    "headingColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "headingPaddingRight": 24,
+    "height": null,
+    "marginLeft": 24,
+    "marginRight": 24,
+    "maxWidth": "100%",
+    "paddingBottom": 24,
+    "paddingLeft": 32,
+    "paddingRight": 32,
+    "paddingTop": 24,
+    "shadow": {
+      "inset": false,
+      "offsetX": 0,
+      "offsetY": 4,
+      "blur": 8,
+      "spread": 0,
+      "color": {
+        "red": 0,
+        "green": 0,
+        "blue": 0,
+        "alpha": 0.1
+      }
+    },
+    "subHeadingMarginTop": 8
+  }
+}

package/build/android/MultiSelectFilter.json

@@ -0,0 +1,70 @@
+{
+  "appearances": {
+    "maxHeight": {
+      "description": "Whether MultiselectFilter modal should expand responsively to content or a set maximu height",
+      "values": [true],
+      "type": "state"
+    },
+    "maxWidth": {
+      "description": "Whether MultiselectFilter modal should expand to content or a set maximuh width",
+      "values": [true],
+      "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"]
+      },
+      "tokens": {
+        "buttonDirection": "column",
+        "minHeight": "100%",
+        "minWidth": "100%"
+      }
+    },
+    {
+      "if": {
+        "maxHeight": true,
+        "viewport": ["sm", "md", "lg", "xl"]
+      },
+      "tokens": {
+        "maxHeightSize": 480
+      }
+    },
+    {
+      "if": {
+        "maxWidth": true,
+        "viewport": ["sm", "md", "lg", "xl"]
+      },
+      "tokens": {
+        "maxWidthSize": 544
+      }
+    }
+  ],
+  "tokens": {
+    "buttonDirection": "row",
+    "headerFontColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "headerFontName": "HelveticaNow",
+    "headerFontSize": 16,
+    "headerFontWeight": 500,
+    "headerLineHeight": 1.5,
+    "maxHeightSize": 0,
+    "maxWidthSize": 0,
+    "minHeight": 412,
+    "minWidth": 320,
+    "subHeaderFontName": "HelveticaNow",
+    "subHeaderFontSize": 14,
+    "subHeaderFontWeight": 400,
+    "subHeaderLineHeight": 1.4
+  }
+}

package/build/android/NavigationBar.json

@@ -0,0 +1,147 @@
+{
+  "appearances": {
+    "expanded": {
+      "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+      "values": [true, false],
+      "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"
+    },
+    "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": {
+        "selected": 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
+        },
+        "color": {
+          "red": 0.29412,
+          "green": 0.15686,
+          "blue": 0.42745,
+          "alpha": 1
+        },
+        "fontName": "HelveticaNow",
+        "fontWeight": 700
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.8902,
+          "green": 0.90196,
+          "blue": 0.9098,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.48627,
+          "green": 0.32549,
+          "blue": 0.64706,
+          "alpha": 1
+        },
+        "borderWidth": 1,
+        "color": {
+          "red": 0.29412,
+          "green": 0.15686,
+          "blue": 0.42745,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "viewport": ["xs", "sm", "md"]
+      },
+      "tokens": {
+        "textAlign": "space-between",
+        "width": 288
+      }
+    },
+    {
+      "if": {
+        "expanded": true
+      },
+      "tokens": {
+        "icoMenu": "PaletteIconCaretUp"
+      }
+    }
+  ],
+  "tokens": {
+    "alignSelf": "flex-start",
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderRadius": 32,
+    "borderWidth": 1,
+    "color": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "fontName": "HelveticaNow",
+    "fontSize": 14,
+    "fontWeight": 400,
+    "icoMenu": "PaletteIconCaretDown",
+    "lineHeight": 1.14285714286,
+    "minWidth": 0,
+    "opacity": 1,
+    "outerBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderGap": 0,
+    "outerBorderWidth": 1,
+    "paddingBottom": 8,
+    "paddingLeft": 16,
+    "paddingRight": 16,
+    "paddingTop": 8,
+    "shadow": null,
+    "textAlign": "center",
+    "width": 0
+  }
+}

package/build/android/Notification.json

@@ -0,0 +1,192 @@
+{
+  "appearances": {
+    "style": {
+      "type": "variant",
+      "values": ["system", "subtle"]
+    },
+    "validation": {
+      "description": "Validation states for form inputs",
+      "values": ["error", "success", "warning"],
+      "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": ["xl"]
+      },
+      "tokens": {
+        "justifyContent": "center"
+      }
+    },
+    {
+      "if": {
+        "style": "system"
+      },
+      "tokens": {
+        "borderLeftWidth": 0,
+        "borderRadius": 0,
+        "borderRightWidth": 0,
+        "borderTopWidth": 0,
+        "iconGap": 8,
+        "paddingBottom": 12,
+        "paddingLeft": 12,
+        "paddingRight": 12,
+        "paddingTop": 12
+      }
+    },
+    {
+      "if": {
+        "style": "subtle"
+      },
+      "tokens": {
+        "borderBottomWidth": 0,
+        "borderLeftWidth": 0,
+        "borderRadius": 0,
+        "borderRightWidth": 0,
+        "borderTopWidth": 0,
+        "iconGap": 8,
+        "paddingBottom": 12,
+        "paddingLeft": 12,
+        "paddingRight": 12,
+        "paddingTop": 12
+      }
+    },
+    {
+      "if": {
+        "validation": "success"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.95686,
+          "green": 0.97647,
+          "blue": 0.94902,
+          "alpha": 1
+        },
+        "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": "warning"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 0.97647,
+          "blue": 0.93333,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.70588,
+          "green": 0.52941,
+          "blue": 0.17255,
+          "alpha": 1
+        },
+        "dismissIcon": null,
+        "icon": "PaletteIconStatusWarning",
+        "iconColor": {
+          "red": 0.70588,
+          "green": 0.52941,
+          "blue": 0.17255,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "validation": "error"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 0.96471,
+          "blue": 0.97255,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        },
+        "dismissIcon": null,
+        "icon": "PaletteIconStatusError",
+        "iconColor": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 0.93725,
+      "green": 0.92941,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderBottomWidth": 1,
+    "borderColor": {
+      "red": 0.48627,
+      "green": 0.32549,
+      "blue": 0.64706,
+      "alpha": 1
+    },
+    "borderLeftWidth": 1,
+    "borderRadius": 6,
+    "borderRightWidth": 1,
+    "borderTopWidth": 1,
+    "color": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "dismissButtonGap": 24,
+    "dismissIcon": "PaletteIconClose",
+    "dismissIconColor": {
+      "red": 0.40392,
+      "green": 0.43137,
+      "blue": 0.45098,
+      "alpha": 1
+    },
+    "fontName": "HelveticaNow",
+    "fontSize": 16,
+    "fontWeight": 400,
+    "icon": "PaletteIconStatusInfo",
+    "iconColor": {
+      "red": 0.29412,
+      "green": 0.15686,
+      "blue": 0.42745,
+      "alpha": 1
+    },
+    "iconGap": 8,
+    "iconSize": 24,
+    "justifyContent": "flex-start",
+    "lineHeight": 1.5,
+    "paddingBottom": 12,
+    "paddingLeft": 12,
+    "paddingRight": 12,
+    "paddingTop": 12
+  }
+}

package/build/android/OrderedList.json

@@ -0,0 +1,81 @@
+{
+  "appearances": {
+    "compact": {
+      "description": "When true it will reduce the line height of the list item.",
+      "type": "variant",
+      "values": [true]
+    },
+    "size": {
+      "description": "Indicates list item text size.",
+      "type": "variant",
+      "values": ["large", "medium", "small"]
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "size": "large"
+      },
+      "tokens": {
+        "itemFontSize": 20,
+        "itemLineHeight": 1.6
+      }
+    },
+    {
+      "if": {
+        "size": "small"
+      },
+      "tokens": {
+        "itemFontSize": 14,
+        "itemLineHeight": 1.42857142857
+      }
+    },
+    {
+      "if": {
+        "compact": true
+      },
+      "tokens": {
+        "itemLineHeight": 1.25
+      }
+    },
+    {
+      "if": {
+        "compact": true,
+        "size": "small"
+      },
+      "tokens": {
+        "itemLineHeight": 1.14285714286
+      }
+    },
+    {
+      "if": {
+        "compact": true,
+        "size": "large"
+      },
+      "tokens": {
+        "itemLineHeight": 1.2
+      }
+    }
+  ],
+  "tokens": {
+    "headerFontName": "HelveticaNow",
+    "headerFontWeight": 700,
+    "interItemMargin": 8,
+    "itemBulletContainerWidth": 16,
+    "itemBulletHeight": 4,
+    "itemBulletWidth": 4,
+    "itemColor": {
+      "red": 0.2549,
+      "green": 0.27059,
+      "blue": 0.27843,
+      "alpha": 1
+    },
+    "itemFontName": "HelveticaNow",
+    "itemFontSize": 16,
+    "itemFontWeight": 400,
+    "itemLineHeight": 1.5,
+    "itemMarginTop": 0,
+    "itemPaddingTop": 0,
+    "listGutter": 8
+  }
+}