@telus-uds/theme-koodo 5.3.0 → 5.5.0

package/build/android/RadioCard.json

@@ -0,0 +1,266 @@
+{
+  "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.3,
+        "paddingBottom": 24,
+        "paddingLeft": 16,
+        "paddingRight": 24,
+        "paddingTop": 16
+      }
+    },
+    {
+      "if": {
+        "checked": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "radioCheckedBackgroundColor": {
+          "red": 0.47843,
+          "green": 0.23922,
+          "blue": 0.98824,
+          "alpha": 1
+        },
+        "radioInputBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "radioInputBorderWidth": 2
+      }
+    },
+    {
+      "description": "Pressed state matches hover state plus light grey background",
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "outerBorderGap": 0,
+        "outerBorderWidth": 1,
+        "radioOuterBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "radioOuterBorderGap": 2
+      }
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        },
+        "radioCheckedBackgroundColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "radioInputBackgroundColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "radioInputBorderColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "radioInputSize": 16,
+        "radioOuterBorderColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "radioOuterBorderGap": 2,
+        "radioOuterBorderWidth": 1
+      }
+    },
+    {
+      "if": {
+        "error": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.87451,
+          "green": 0.23922,
+          "blue": 0.04706,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.87451,
+          "green": 0.23922,
+          "blue": 0.04706,
+          "alpha": 1
+        },
+        "radioInputBorderColor": {
+          "red": 0.87451,
+          "green": 0.23922,
+          "blue": 0.04706,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0.78824,
+      "green": 0.78431,
+      "blue": 0.78431,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "borderWidth": 1,
+    "color": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "contentAlignItems": "stretch",
+    "contentFlexGrow": 0,
+    "contentFlexShrink": 1,
+    "contentJustifyContent": "flex-start",
+    "contentSpace": 2,
+    "flex": 1,
+    "fontName": "StagSans",
+    "fontSize": 20,
+    "fontWeight": 700,
+    "letterSpacing": 0,
+    "lineHeight": 1.4,
+    "minWidth": 288,
+    "outerBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "outerBorderGap": 0,
+    "outerBorderWidth": 0,
+    "paddingBottom": 16,
+    "paddingLeft": 8,
+    "paddingRight": 16,
+    "paddingTop": 12,
+    "radioCheckedBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "radioCheckedSize": 16,
+    "radioInputBackgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "radioInputBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "radioInputBorderWidth": 2,
+    "radioInputOutlineColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "radioInputOutlineWidth": 0,
+    "radioInputSize": 24,
+    "radioOuterBorderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "radioOuterBorderGap": 0,
+    "radioOuterBorderWidth": 0,
+    "radioSpace": 2,
+    "shadow": null,
+    "textTransform": "none"
+  }
+}

package/build/android/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/android/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/android/Ribbon.json

@@ -0,0 +1,116 @@
+{
+  "appearances": {
+    "purpose": {
+      "type": "variant",
+      "values": ["offer", "default", "editorial", "subtle"]
+    },
+    "wrap": {
+      "type": "variant",
+      "values": [true]
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "purpose": "editorial"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 0.67843,
+          "blue": 0,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "purpose": "offer"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.47843,
+          "green": 0.23922,
+          "blue": 0.98824,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "purpose": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.63137,
+          "green": 0.92941,
+          "blue": 0,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "wrap": true
+      },
+      "tokens": {
+        "paddingBottom": 6,
+        "paddingTop": 6
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 0.63137,
+      "green": 0.92941,
+      "blue": 0,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "borderRadiusBottomLeft": null,
+    "borderRadiusBottomRight": null,
+    "boxShadowColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "boxShadowPaddingBottom": null,
+    "boxShadowPaddingLeft": null,
+    "boxShadowPaddingRight": null,
+    "boxShadowPaddingTop": null,
+    "curveAfterBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "curveAfterHeight": null,
+    "curveAfterRadius": null,
+    "curveAfterWidth": null,
+    "curveBackgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "curveHeight": null,
+    "curveMarginTop": null,
+    "curveWidth": null,
+    "fontColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "fontName": "StagSans",
+    "fontSize": 14,
+    "fontWeight": 600,
+    "gradient": null,
+    "lineHeight": 1.42857142857,
+    "paddingBottom": 2,
+    "paddingLeft": 12,
+    "paddingRight": 12,
+    "paddingTop": 2
+  }
+}

package/build/android/Search.json

@@ -0,0 +1,115 @@
+{
+  "appearances": {
+    "focus": {
+      "description": "Focus states for some input elements are well supported across web, RN, ios and android",
+      "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": {
+        "focus": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.47843,
+          "green": 0.23922,
+          "blue": 0.98824,
+          "alpha": 1
+        },
+        "borderWidth": 3,
+        "outerBorderWidth": 0
+      }
+    },
+    {
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        },
+        "placeholderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "borderRadius": 4,
+    "borderWidth": 1,
+    "buttonsGap": 2,
+    "clearButtonIcon": "PaletteIconTimes",
+    "color": {
+      "red": 0.4,
+      "green": 0.4,
+      "blue": 0.4,
+      "alpha": 1
+    },
+    "fontName": "StagSans",
+    "fontSize": 16,
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "outerBackgroundColor": {
+      "red": 0.25098,
+      "green": 0.25098,
+      "blue": 0.25098,
+      "alpha": 1
+    },
+    "outerBorderColor": {
+      "red": 0.25098,
+      "green": 0.25098,
+      "blue": 0.25098,
+      "alpha": 1
+    },
+    "outerBorderRadius": 32,
+    "outerBorderWidth": 0,
+    "paddingBottom": 12,
+    "paddingLeft": 16,
+    "paddingRight": 6,
+    "paddingTop": 12,
+    "placeholderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "submitButtonIcon": "PaletteIconSpyglass"
+  }
+}

package/build/android/SearchButton.json

@@ -0,0 +1,130 @@
+{
+  "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"
+    },
+    "priority": {
+      "description": "",
+      "type": "variant",
+      "values": ["high"]
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "priority": "high"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.25098,
+          "green": 0.25098,
+          "blue": 0.25098,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "priority": "high"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "priority": null
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "iconColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "borderColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 0
+    },
+    "borderRadius": 32,
+    "borderWidth": 0,
+    "iconColor": {
+      "red": 0,
+      "green": 0,
+      "blue": 0,
+      "alpha": 1
+    },
+    "iconSize": 20,
+    "opacity": 1,
+    "paddingBottom": 8,
+    "paddingLeft": 8,
+    "paddingRight": 8,
+    "paddingTop": 8,
+    "shadow": null
+  }
+}