@telus-uds/theme-koodo 5.3.0 → 5.4.0

package/build/ios/NavigationBar.json

@@ -0,0 +1,187 @@
+{
+  "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,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "fontName": "StagSans",
+        "fontWeight": 600,
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        },
+        "borderWidth": 1,
+        "color": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "viewport": ["xs", "sm", "md"]
+      },
+      "tokens": {
+        "textAlign": "space-between",
+        "width": 288
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "fontName": "StagSans",
+        "fontWeight": 600,
+        "outerBorderColor": {
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "expanded": true
+      },
+      "tokens": {
+        "icoMenu": "PaletteIconChevronUp"
+      }
+    }
+  ],
+  "tokens": {
+    "alignSelf": "flex-start",
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "borderWidth": 4,
+    "color": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "fontName": "StagSans",
+    "fontSize": 14,
+    "fontWeight": 600,
+    "icoMenu": "PaletteIconChevronDown",
+    "lineHeight": 1.45,
+    "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": 0,
+    "paddingBottom": 6,
+    "paddingLeft": 16,
+    "paddingRight": 16,
+    "paddingTop": 6,
+    "shadow": null,
+    "textAlign": "center",
+    "width": 0
+  }
+}

package/build/ios/Notification.json

@@ -0,0 +1,210 @@
+{
+  "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.77255,
+          "green": 0.94902,
+          "blue": 0.8,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.1098,
+          "green": 0.48235,
+          "blue": 0.16863,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "icon": "PaletteIconCheckCircleFilled",
+        "iconColor": {
+          "red": 0.1098,
+          "green": 0.48235,
+          "blue": 0.16863,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "validation": "warning"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 0.96078,
+          "blue": 0.82353,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.97255,
+          "green": 0.75686,
+          "blue": 0,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "dismissIcon": null,
+        "icon": "PaletteIconExclamationTriangle",
+        "iconColor": {
+          "red": 0.78824,
+          "green": 0.21569,
+          "blue": 0.04314,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "validation": "error"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.98824,
+          "green": 0.82745,
+          "blue": 0.77647,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.78824,
+          "green": 0.21569,
+          "blue": 0.04314,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "dismissIcon": null,
+        "icon": "PaletteIconCaution",
+        "iconColor": {
+          "red": 0.78824,
+          "green": 0.21569,
+          "blue": 0.04314,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 0.93725,
+      "green": 0.93725,
+      "blue": 0.93725,
+      "alpha": 1
+    },
+    "borderBottomWidth": 1,
+    "borderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "borderLeftWidth": 1,
+    "borderRadius": 6,
+    "borderRightWidth": 1,
+    "borderTopWidth": 1,
+    "color": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "dismissButtonGap": 24,
+    "dismissIcon": "PaletteIconClose",
+    "dismissIconColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "fontName": "StagSans",
+    "fontSize": 16,
+    "fontWeight": 400,
+    "icon": null,
+    "iconColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "iconGap": 24,
+    "iconSize": 24,
+    "justifyContent": "flex-start",
+    "lineHeight": 1.5,
+    "paddingBottom": 12,
+    "paddingLeft": 12,
+    "paddingRight": 12,
+    "paddingTop": 12
+  }
+}

package/build/ios/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.4
+      }
+    },
+    {
+      "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": "StagSans",
+    "headerFontWeight": 600,
+    "interItemMargin": 8,
+    "itemBulletContainerWidth": 16,
+    "itemBulletHeight": 4,
+    "itemBulletWidth": 4,
+    "itemColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "itemFontName": "StagSans",
+    "itemFontSize": 16,
+    "itemFontWeight": 400,
+    "itemLineHeight": 1.5,
+    "itemMarginTop": 0,
+    "itemPaddingTop": 0,
+    "listGutter": 8
+  }
+}

package/build/ios/Pagination.json

@@ -0,0 +1,50 @@
+{
+  "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": ["md", "lg", "xl"]
+      },
+      "tokens": {
+        "gap": 4,
+        "truncateAbove": 6
+      }
+    }
+  ],
+  "tokens": {
+    "borderBottomWidth": 0,
+    "borderColor": {
+      "red": 0.00392,
+      "green": 0.41961,
+      "blue": 0.41569,
+      "alpha": 1
+    },
+    "borderLeftWidth": 0,
+    "borderRightWidth": 0,
+    "borderTopWidth": 0,
+    "color": {
+      "red": 0.4,
+      "green": 0.4,
+      "blue": 0.4,
+      "alpha": 1
+    },
+    "ellipsisBorderBottomWidth": 0,
+    "ellipsisBorderLeftWidth": 0,
+    "ellipsisBorderRightWidth": 0,
+    "ellipsisBorderTopWidth": 0,
+    "ellipsisHeight": null,
+    "ellipsisPadding": 0,
+    "fontName": "StagSans",
+    "fontSize": 16,
+    "fontWeight": 400,
+    "gap": 2,
+    "lineHeight": 1.5,
+    "truncateAbove": 4
+  }
+}

package/build/ios/PaginationPageButton.json

@@ -0,0 +1,106 @@
+{
+  "appearances": {
+    "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": {
+        "selected": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.47843,
+          "green": 0.23922,
+          "blue": 0.98824,
+          "alpha": 1
+        },
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "textLine": "none"
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "borderBottomWidth": 1,
+    "borderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "borderLeftWidth": 1,
+    "borderRadius": 32,
+    "borderRightWidth": 1,
+    "borderTopWidth": 1,
+    "color": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "fontName": "StagSans",
+    "fontSize": 16,
+    "fontWeight": 600,
+    "height": 32,
+    "lineHeight": 1,
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderGap": 4,
+    "outerBorderWidth": 4,
+    "paddingBottom": 8,
+    "paddingLeft": 8,
+    "paddingRight": 8,
+    "paddingTop": 8,
+    "textAlign": "center",
+    "textLine": "underline",
+    "width": 32
+  }
+}