@telus-uds/theme-koodo 5.2.0 → 5.4.0

package/build/android/List.json

@@ -0,0 +1,99 @@
+{
+  "appearances": {
+    "compact": {
+      "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
+      "type": "variant",
+      "values": [true]
+    },
+    "size": {
+      "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
+      "type": "variant",
+      "values": ["large", "small"]
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "size": "large"
+      },
+      "tokens": {
+        "iconMarginTop": 2,
+        "itemFontSize": 20,
+        "itemIconSize": 20,
+        "itemLineHeight": 1.4,
+        "listGutter": 16
+      }
+    },
+    {
+      "if": {
+        "size": "small"
+      },
+      "tokens": {
+        "iconMarginTop": 2,
+        "itemFontSize": 14,
+        "itemIconSize": 14,
+        "listGutter": 10
+      }
+    },
+    {
+      "if": {
+        "compact": true
+      },
+      "tokens": {
+        "iconMarginTop": 1,
+        "itemLineHeight": 1.2
+      }
+    },
+    {
+      "if": {
+        "compact": true,
+        "size": "small"
+      },
+      "tokens": {
+        "itemLineHeight": 1.1
+      }
+    },
+    {
+      "if": {
+        "compact": true,
+        "size": "large"
+      },
+      "tokens": {
+        "itemLineHeight": 1.3
+      }
+    }
+  ],
+  "tokens": {
+    "bulletIcon": "PaletteIconBulletFill",
+    "dividerColor": {
+      "red": 0.78824,
+      "green": 0.78431,
+      "blue": 0.78431,
+      "alpha": 1
+    },
+    "dividerSize": 1,
+    "iconMarginTop": 2,
+    "interItemMargin": 8,
+    "interItemMarginWithDivider": 16,
+    "itemBulletColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "itemBulletContainerAlign": "center",
+    "itemBulletContainerWidth": 16,
+    "itemFontName": "StagSans",
+    "itemFontSize": 16,
+    "itemFontWeight": 400,
+    "itemIconColor": {
+      "red": 1,
+      "green": 0,
+      "blue": 0.46275,
+      "alpha": 1
+    },
+    "itemIconSize": 16,
+    "itemLineHeight": 1.3,
+    "listGutter": 10
+  }
+}

package/build/android/Listbox.json

@@ -0,0 +1,316 @@
+{
+  "appearances": {
+    "current": {
+      "description": "When the current item is selected",
+      "values": [true, false],
+      "type": "state"
+    },
+    "expanded": {
+      "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+      "values": [true, false],
+      "type": "state"
+    },
+    "isChild": {
+      "description": "when the item is child of another child",
+      "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"
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "current": true
+      },
+      "tokens": {
+        "groupBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "groupBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "groupColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "itemBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "itemColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "current": true,
+        "pressed": true
+      },
+      "tokens": {
+        "itemBackgroundColor": {
+          "red": 0.7098,
+          "green": 0.70588,
+          "blue": 0.70588,
+          "alpha": 1
+        },
+        "itemColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "isChild": true
+      },
+      "tokens": {
+        "itemBorderBottomWidth": 0,
+        "itemBorderLeftColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "itemBorderLeftWidth": 4,
+        "itemBorderTopWidth": 0
+      }
+    },
+    {
+      "if": {
+        "isChild": true,
+        "pressed": true
+      },
+      "tokens": {
+        "itemBorderBottomWidth": 0,
+        "itemBorderLeftColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        },
+        "itemBorderTopWidth": 0,
+        "itemColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "expanded": true
+      },
+      "tokens": {
+        "groupBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "groupBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "groupColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "groupIcon": "PaletteIconChevronUp",
+        "itemColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "current": true,
+        "isChild": true
+      },
+      "tokens": {
+        "itemBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "itemBorderLeftColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "itemColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "groupBackgroundColor": {
+          "red": 0.25098,
+          "green": 0.25098,
+          "blue": 0.25098,
+          "alpha": 1
+        },
+        "groupColor": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        },
+        "itemBackgroundColor": {
+          "red": 0.25098,
+          "green": 0.25098,
+          "blue": 0.25098,
+          "alpha": 1
+        },
+        "itemBorderLeftColor": {
+          "red": 0.25098,
+          "green": 0.25098,
+          "blue": 0.25098,
+          "alpha": 1
+        },
+        "itemColor": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "groupBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "groupBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "groupBorderRadius": 0,
+    "groupBorderWidth": 1,
+    "groupColor": {
+      "red": 0.4,
+      "green": 0.4,
+      "blue": 0.4,
+      "alpha": 1
+    },
+    "groupFontName": "StagSans",
+    "groupFontSize": 16,
+    "groupFontWeight": 400,
+    "groupHeight": 32,
+    "groupIcon": "PaletteIconChevronDown",
+    "groupPaddingBottom": 12,
+    "groupPaddingLeft": 16,
+    "groupPaddingRight": 16,
+    "groupPaddingTop": 12,
+    "itemBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "itemBorderBottomColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "itemBorderBottomWidth": 1,
+    "itemBorderLeftColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "itemBorderLeftWidth": 1,
+    "itemBorderRadius": 0,
+    "itemBorderRightColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "itemBorderRightWidth": 1,
+    "itemBorderTopColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "itemBorderTopWidth": 1,
+    "itemBorderWidth": 0,
+    "itemColor": {
+      "red": 0.4,
+      "green": 0.4,
+      "blue": 0.4,
+      "alpha": 1
+    },
+    "itemDisplay": false,
+    "itemFontName": "StagSans",
+    "itemFontSize": 16,
+    "itemFontWeight": 400,
+    "itemHeight": 32,
+    "itemOutline": 0,
+    "itemPaddingBottom": 8,
+    "itemPaddingLeft": 16,
+    "itemPaddingRight": 16,
+    "itemPaddingTop": 8,
+    "itemTextDecoration": "none",
+    "lineHeight": 1.5,
+    "minHeight": "100%",
+    "minWidth": "100%",
+    "shadow": {
+      "inset": false,
+      "offsetX": 0,
+      "offsetY": 2,
+      "blur": 2,
+      "spread": 0,
+      "color": {
+        "red": 0,
+        "green": 0,
+        "blue": 0,
+        "alpha": 0.2
+      }
+    }
+  }
+}

package/build/android/Modal.json

@@ -0,0 +1,198 @@
+{
+  "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,
+        "paddingBottom": 32,
+        "paddingLeft": 32,
+        "paddingRight": 32,
+        "paddingTop": 32
+      }
+    },
+    {
+      "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,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "backdropOpacity": 0.5,
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "cancelButtonColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "closeIcon": "PaletteIconTimes",
+    "closeIconColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "closeIconSize": 24,
+    "closePadding": 4,
+    "containerPaddingBottom": 0,
+    "containerPaddingLeft": 0,
+    "containerPaddingRight": 0,
+    "containerPaddingTop": 0,
+    "direction": "row",
+    "gap": 16,
+    "headingColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "headingPaddingRight": 24,
+    "height": null,
+    "marginLeft": 24,
+    "marginRight": 24,
+    "maxWidth": "100%",
+    "paddingBottom": 24,
+    "paddingLeft": 24,
+    "paddingRight": 24,
+    "paddingTop": 24,
+    "shadow": {
+      "inset": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "blur": 0,
+      "spread": 0,
+      "color": {
+        "red": 0,
+        "green": 0,
+        "blue": 0,
+        "alpha": 0
+      }
+    },
+    "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,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "headerFontName": "StagSans",
+    "headerFontSize": 24,
+    "headerFontWeight": 700,
+    "headerLineHeight": 1.33333333333,
+    "maxHeightSize": 0,
+    "maxWidthSize": 0,
+    "minHeight": 412,
+    "minWidth": 320,
+    "subHeaderFontName": "StagSans",
+    "subHeaderFontSize": 16,
+    "subHeaderFontWeight": 400,
+    "subHeaderLineHeight": 1.5
+  }
+}