@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/ios/Button.json

@@ -0,0 +1,527 @@
+{
+  "appearances": {
+    "danger": {
+      "description": "Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.",
+      "type": "variant",
+      "values": [true]
+    },
+    "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"
+    },
+    "inverse": {
+      "description": "Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in 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"
+    },
+    "priority": {
+      "description": "Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.",
+      "type": "variant",
+      "values": ["high", "low"]
+    },
+    "size": {
+      "type": "variant",
+      "values": ["small"]
+    },
+    "text": {
+      "description": "Text variant visually deprioritize the button styles",
+      "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"
+    },
+    "width": {
+      "description": "Available in default, full-width or responsive. Default-width expands based on content. Full-width expands to width of the container. Responsive automatically applies full-width when is displayed on the XS viewport.",
+      "type": "variant",
+      "values": ["full", "responsive"]
+    }
+  },
+  "rules": [
+    {
+      "if": {
+        "priority": "high"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.16863,
+          "green": 0.50196,
+          "blue": 0,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.08627,
+          "green": 0.24314,
+          "blue": 0.02353,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "priority": "high"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "pressed": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 0.6
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "danger": true,
+        "priority": null
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        },
+        "color": {
+          "red": 0.88235,
+          "green": 0.13725,
+          "blue": 0.22353,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "danger": true,
+        "inverse": true,
+        "priority": null
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "danger": true,
+        "pressed": true,
+        "priority": null
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.75686,
+          "green": 0.13725,
+          "blue": 0.20784,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "width": "full"
+      },
+      "tokens": {
+        "width": "100%"
+      }
+    },
+    {
+      "if": {
+        "viewport": ["xs"],
+        "width": "responsive"
+      },
+      "tokens": {
+        "width": "100%"
+      }
+    },
+    {
+      "if": {
+        "size": "small"
+      },
+      "tokens": {
+        "minWidth": 0,
+        "paddingBottom": 4,
+        "paddingTop": 4
+      }
+    },
+    {
+      "description": "Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.",
+      "if": {
+        "inactive": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "inverse": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 0.6
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "text": true
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "minWidth": 0,
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "textLine": "underline"
+      }
+    },
+    {
+      "if": {
+        "priority": "high",
+        "text": true
+      },
+      "tokens": {
+        "color": {
+          "red": 0.16863,
+          "green": 0.50196,
+          "blue": 0,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "priority": "low",
+        "text": true
+      },
+      "tokens": {
+        "color": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "text": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 0.08627,
+          "green": 0.24314,
+          "blue": 0.02353,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "textLine": "none"
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "text": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "textLine": "none"
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "text": true
+      },
+      "tokens": {
+        "borderRadius": 0,
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "inverse": true,
+        "text": true
+      },
+      "tokens": {
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "color": {
+          "red": 0.69804,
+          "green": 0.72549,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "backgroundColor": {
+      "red": 1,
+      "green": 1,
+      "blue": 1,
+      "alpha": 1
+    },
+    "borderBottomWidth": 1,
+    "borderColor": {
+      "red": 0.16863,
+      "green": 0.50196,
+      "blue": 0,
+      "alpha": 1
+    },
+    "borderLeftWidth": 1,
+    "borderRadius": 32,
+    "borderRightWidth": 1,
+    "borderTopWidth": 1,
+    "borderWidth": 1,
+    "color": {
+      "red": 0.16863,
+      "green": 0.50196,
+      "blue": 0,
+      "alpha": 1
+    },
+    "fontName": "HelveticaNow",
+    "fontSize": 16,
+    "fontWeight": 700,
+    "height": null,
+    "icon": null,
+    "iconSize": 24,
+    "iconSpace": 1,
+    "lineHeight": 1.5,
+    "minWidth": 144,
+    "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": 12,
+    "paddingLeft": 32,
+    "paddingRight": 32,
+    "paddingTop": 12,
+    "shadow": null,
+    "textAlign": "center",
+    "textLine": "none",
+    "textLineStyle": "solid",
+    "width": null
+  }
+}