@telus-uds/theme-public-mobile 4.22.0 → 5.0.0-alpha.1

package/build/android/theme.json

@@ -2312,17 +2312,6 @@
     },
     "Card": {
       "appearances": {
-        "background": {
-          "type": "variant",
-          "values": [
-            "alternative",
-            "subtle",
-            "grid",
-            "image",
-            "feature",
-            "plain"
-          ]
-        },
         "borderRadius": {
           "type": "variant",
           "values": ["none", "small", "large"]
@@ -2483,110 +2472,6 @@
             "borderRadius": 6
           }
         },
-        {
-          "if": {
-            "background": "alternative"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.98824,
-              "green": 0.97255,
-              "blue": 0.93333,
-              "alpha": 1
-            },
-            "borderColor": {
-              "red": 0.80392,
-              "green": 0.81176,
-              "blue": 0.83529,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "background": "subtle"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.99216,
-              "green": 0.98824,
-              "blue": 0.96471,
-              "alpha": 1
-            },
-            "borderColor": {
-              "red": 0.97647,
-              "green": 0.94902,
-              "blue": 0.86667,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "background": "grid"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.98824,
-              "green": 0.97255,
-              "blue": 0.93333,
-              "alpha": 1
-            },
-            "borderWidth": 0
-          }
-        },
-        {
-          "if": {
-            "background": "image"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "borderColor": {
-              "red": 0.80392,
-              "green": 0.81176,
-              "blue": 0.83529,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "background": "feature"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "borderColor": {
-              "red": 0.95294,
-              "green": 0.61569,
-              "blue": 0.50196,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "background": "plain"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.99216,
-              "green": 0.98824,
-              "blue": 0.96471,
-              "alpha": 1
-            },
-            "borderWidth": 0
-          }
-        },
         {
           "if": {
             "style": "grid"
@@ -3526,6 +3411,7 @@
         "containerPaddingTop": 24,
         "margin": 4,
         "padding": 8,
+        "playIcon": "PaletteIconPlaySolid",
         "selectedBorderColor": {
           "red": 0.95294,
           "green": 0.61569,
@@ -3995,14 +3881,6 @@
     },
     "ChevronLink": {
       "appearances": {
-        "alternative": {
-          "type": "variant",
-          "values": [true]
-        },
-        "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],
@@ -4037,60 +3915,6 @@
             }
           }
         },
-        {
-          "if": {
-            "alternative": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.22353,
-              "green": 0.25098,
-              "blue": 0.33725,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "alternative": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.16863,
-              "green": 0.19216,
-              "blue": 0.27059,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.97647,
-              "green": 0.94902,
-              "blue": 0.86667,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.95294,
-              "green": 0.61569,
-              "blue": 0.50196,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "size": "large"
@@ -5113,21 +4937,11 @@
     },
     "ExpandCollapseMiniControl": {
       "appearances": {
-        "alternative": {
-          "description": "Replaces the default colour with black.",
-          "type": "variant",
-          "values": [true]
-        },
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [true, false],
           "type": "state"
         },
-        "inverse": {
-          "description": "Replaces the default colour with white.",
-          "type": "variant",
-          "values": [true]
-        },
         "quiet": {
           "description": "When it is true, it does not show the decoration",
           "type": "state",
@@ -5136,6 +4950,10 @@
         "size": {
           "type": "variant",
           "values": ["micro", "small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["subtle", "inverse"]
         }
       },
       "rules": [
@@ -5149,7 +4967,7 @@
         },
         {
           "if": {
-            "alternative": true
+            "style": "subtle"
           },
           "tokens": {
             "color": {
@@ -5168,7 +4986,7 @@
         },
         {
           "if": {
-            "inverse": true
+            "style": "inverse"
           },
           "tokens": {
             "color": {
@@ -5225,8 +5043,8 @@
         },
         {
           "if": {
-            "alternative": true,
-            "quiet": true
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
             "color": {
@@ -5246,8 +5064,8 @@
         },
         {
           "if": {
-            "inverse": true,
-            "quiet": true
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
             "color": {
@@ -7917,19 +7735,11 @@
     },
     "Link": {
       "appearances": {
-        "alternative": {
-          "type": "variant",
-          "values": [true]
-        },
         "iconPosition": {
           "description": "Theme styles to be applied to icon links depending on where the icon is in relation to the link text",
           "values": ["left", "right", "inline"],
           "type": "state"
         },
-        "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],
@@ -7981,89 +7791,6 @@
             "textLine": "none"
           }
         },
-        {
-          "if": {
-            "alternative": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.22353,
-              "green": 0.25098,
-              "blue": 0.33725,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "alternative": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.16863,
-              "green": 0.19216,
-              "blue": 0.27059,
-              "alpha": 1
-            },
-            "outerBorderWidth": 0
-          }
-        },
-        {
-          "if": {
-            "alternative": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.16863,
-              "green": 0.19216,
-              "blue": 0.27059,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "alternative": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.16863,
-              "green": 0.19216,
-              "blue": 0.27059,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.97647,
-              "green": 0.94902,
-              "blue": 0.86667,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.95294,
-              "green": 0.61569,
-              "blue": 0.50196,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "size": "micro"
@@ -10537,15 +10264,6 @@
     },
     "ProgressBar": {
       "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"
-        },
-        "negative": {
-          "type": "variant",
-          "values": [true]
-        },
         "style": {
           "description": "Configure `style` variant for `ProgressBar`",
           "type": "variant",
@@ -10553,32 +10271,6 @@
         }
       },
       "rules": [
-        {
-          "if": {
-            "inactive": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.80392,
-              "green": 0.81176,
-              "blue": 0.83529,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "negative": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.74902,
-              "green": 0.0902,
-              "blue": 0.13333,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "style": "subtle"
@@ -11811,10 +11503,6 @@
         "purpose": {
           "type": "variant",
           "values": ["offer", "default", "editorial", "subtle"]
-        },
-        "wrap": {
-          "type": "variant",
-          "values": [true]
         }
       },
       "rules": [
@@ -11862,18 +11550,6 @@
               "alpha": 1
             }
           }
-        },
-        {
-          "if": {
-            "wrap": true
-          },
-          "tokens": {
-            "borderRadius": null,
-            "borderRadiusBottomLeft": 8,
-            "borderRadiusBottomRight": 8,
-            "paddingBottom": 6,
-            "paddingTop": 6
-          }
         }
       ],
       "tokens": {
@@ -11883,9 +11559,9 @@
           "blue": 0.33725,
           "alpha": 1
         },
-        "borderRadius": 50,
-        "borderRadiusBottomLeft": null,
-        "borderRadiusBottomRight": null,
+        "borderRadius": null,
+        "borderRadiusBottomLeft": 8,
+        "borderRadiusBottomRight": 8,
         "boxShadowColor": {
           "red": 0,
           "green": 0,
@@ -11925,10 +11601,10 @@
         "fontWeight": 700,
         "gradient": null,
         "lineHeight": 1.4285714285714286,
-        "paddingBottom": 2,
+        "paddingBottom": 6,
         "paddingLeft": 12,
         "paddingRight": 12,
-        "paddingTop": 2
+        "paddingTop": 6
       }
     },
     "Search": {
@@ -16743,7 +16419,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.20.0",
+    "themeTokensVersion": "5.0.0-alpha.1",
     "name": "theme-public-mobile"
   }
 }

package/build/ios/Card.json

@@ -1,9 +1,5 @@
 {
   "appearances": {
-    "background": {
-      "type": "variant",
-      "values": ["alternative", "subtle", "grid", "image", "feature", "plain"]
-    },
     "borderRadius": {
       "type": "variant",
       "values": ["none", "small", "large"]
@@ -164,110 +160,6 @@
         "borderRadius": 6
       }
     },
-    {
-      "if": {
-        "background": "alternative"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 0.98824,
-          "green": 0.97255,
-          "blue": 0.93333,
-          "alpha": 1
-        },
-        "borderColor": {
-          "red": 0.80392,
-          "green": 0.81176,
-          "blue": 0.83529,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "background": "subtle"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 0.99216,
-          "green": 0.98824,
-          "blue": 0.96471,
-          "alpha": 1
-        },
-        "borderColor": {
-          "red": 0.97647,
-          "green": 0.94902,
-          "blue": 0.86667,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "background": "grid"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 0.98824,
-          "green": 0.97255,
-          "blue": 0.93333,
-          "alpha": 1
-        },
-        "borderWidth": 0
-      }
-    },
-    {
-      "if": {
-        "background": "image"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "borderColor": {
-          "red": 0.80392,
-          "green": 0.81176,
-          "blue": 0.83529,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "background": "feature"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "borderColor": {
-          "red": 0.95294,
-          "green": 0.61569,
-          "blue": 0.50196,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "background": "plain"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 0.99216,
-          "green": 0.98824,
-          "blue": 0.96471,
-          "alpha": 1
-        },
-        "borderWidth": 0
-      }
-    },
     {
       "if": {
         "style": "grid"

package/build/ios/CarouselThumbnail.json

@@ -49,6 +49,7 @@
     "containerPaddingTop": 24,
     "margin": 4,
     "padding": 8,
+    "playIcon": "PaletteIconPlaySolid",
     "selectedBorderColor": {
       "red": 0.95294,
       "green": 0.61569,

package/build/ios/ChevronLink.json

@@ -1,13 +1,5 @@
 {
   "appearances": {
-    "alternative": {
-      "type": "variant",
-      "values": [true]
-    },
-    "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],
@@ -42,60 +34,6 @@
         }
       }
     },
-    {
-      "if": {
-        "alternative": true
-      },
-      "tokens": {
-        "color": {
-          "red": 0.22353,
-          "green": 0.25098,
-          "blue": 0.33725,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "alternative": true,
-        "pressed": true
-      },
-      "tokens": {
-        "color": {
-          "red": 0.16863,
-          "green": 0.19216,
-          "blue": 0.27059,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "inverse": true
-      },
-      "tokens": {
-        "color": {
-          "red": 0.97647,
-          "green": 0.94902,
-          "blue": 0.86667,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "inverse": true,
-        "pressed": true
-      },
-      "tokens": {
-        "color": {
-          "red": 0.95294,
-          "green": 0.61569,
-          "blue": 0.50196,
-          "alpha": 1
-        }
-      }
-    },
     {
       "if": {
         "size": "large"