@telus-uds/theme-koodo 8.0.0-alpha.0 → 8.0.0-alpha.2

package/build/android/theme.json

@@ -2320,11 +2320,6 @@
     },
     "Card": {
       "appearances": {
-        "background": {
-          "description": "Defines background related attributes of Card",
-          "type": "variant",
-          "values": ["alternative", "subtle", "grid", "feature", "plain"]
-        },
         "borderRadius": {
           "type": "variant",
           "values": ["none", "small", "large"]
@@ -2485,78 +2480,6 @@
             "borderRadius": 8
           }
         },
-        {
-          "if": {
-            "background": "alternative"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.87843,
-              "green": 0.84706,
-              "blue": 0.98824,
-              "alpha": 1
-            },
-            "borderRadius": 8,
-            "borderWidth": 0
-          }
-        },
-        {
-          "if": {
-            "background": "subtle"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.63137,
-              "green": 0.92941,
-              "blue": 0,
-              "alpha": 1
-            },
-            "borderWidth": 0
-          }
-        },
-        {
-          "if": {
-            "background": "grid"
-          },
-          "tokens": {
-            "borderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 1
-            },
-            "borderWidth": 1
-          }
-        },
-        {
-          "if": {
-            "background": "feature"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 1,
-              "green": 0.67843,
-              "blue": 0,
-              "alpha": 1
-            },
-            "borderRadius": 8,
-            "borderWidth": 0
-          }
-        },
-        {
-          "if": {
-            "background": "plain"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "borderWidth": 0
-          }
-        },
         {
           "if": {
             "style": "grid"
@@ -3477,6 +3400,7 @@
         "containerPaddingTop": 24,
         "margin": 4,
         "padding": 8,
+        "playIcon": "PaletteIconPlaySolid",
         "selectedBorderColor": {
           "red": 0,
           "green": 0,
@@ -3972,14 +3896,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],
@@ -4014,60 +3930,6 @@
             }
           }
         },
-        {
-          "if": {
-            "alternative": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.47843,
-              "green": 0.23922,
-              "blue": 0.98824,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "alternative": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.4,
-              "green": 0.4,
-              "blue": 0.4,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true
-          },
-          "tokens": {
-            "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "size": "large"
@@ -5147,21 +5009,11 @@
     },
     "ExpandCollapseMiniControl": {
       "appearances": {
-        "alternative": {
-          "description": "Replaces the default green 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 green colour with white. Useful for dark backgrounds.",
-          "type": "variant",
-          "values": [true]
-        },
         "quiet": {
           "description": "When it is true, it does not show the decoration",
           "type": "state",
@@ -5170,6 +5022,10 @@
         "size": {
           "type": "variant",
           "values": ["micro", "small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["subtle", "inverse"]
         }
       },
       "rules": [
@@ -5183,7 +5039,7 @@
         },
         {
           "if": {
-            "alternative": true
+            "style": "subtle"
           },
           "tokens": {
             "color": {
@@ -5196,7 +5052,7 @@
         },
         {
           "if": {
-            "inverse": true
+            "style": "inverse"
           },
           "tokens": {
             "color": {
@@ -5253,8 +5109,8 @@
         },
         {
           "if": {
-            "alternative": true,
-            "quiet": true
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
             "color": {
@@ -5268,8 +5124,8 @@
         },
         {
           "if": {
-            "inverse": true,
-            "quiet": true
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
             "color": {
@@ -8052,19 +7908,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],
@@ -8116,60 +7964,6 @@
             "textLine": "none"
           }
         },
-        {
-          "if": {
-            "alternative": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.34902,
-              "green": 0.34902,
-              "blue": 0.34902,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "alternative": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.25098,
-              "green": 0.25098,
-              "blue": 0.25098,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true
-          },
-          "tokens": {
-            "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "size": "micro"
@@ -10618,6 +10412,7 @@
             "size": "mini"
           },
           "tokens": {
+            "barHeight": 8,
             "height": 8
           }
         },
@@ -10661,6 +10456,7 @@
           "blue": 0.98039,
           "alpha": 1
         },
+        "barHeight": 16,
         "borderColor": {
           "red": 0.4,
           "green": 0.4,
@@ -10687,15 +10483,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",
@@ -10703,44 +10490,6 @@
         }
       },
       "rules": [
-        {
-          "if": {
-            "inactive": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            },
-            "outlineColor": {
-              "red": 0.34902,
-              "green": 0.34902,
-              "blue": 0.34902,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "negative": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.78824,
-              "green": 0.21569,
-              "blue": 0.04314,
-              "alpha": 1
-            },
-            "outlineColor": {
-              "red": 0.34902,
-              "green": 0.34902,
-              "blue": 0.34902,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "style": "subtle"
@@ -12154,6 +11903,29 @@
         "paddingTop": 6
       }
     },
+    "Scroll": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "itemGap": 16,
+        "progressBarColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "progressBarHeight": 8,
+        "progressHitAreaHeight": 24,
+        "progressSpacing": 8,
+        "progressTrackColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0.1
+        },
+        "progressTrackHeight": 8
+      }
+    },
     "Search": {
       "appearances": {
         "focus": {
@@ -17099,7 +16871,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "5.0.0-alpha.0",
+    "themeTokensVersion": "5.0.0-alpha.2",
     "name": "theme-koodo"
   }
 }

package/build/ios/Card.json

@@ -1,10 +1,5 @@
 {
   "appearances": {
-    "background": {
-      "description": "Defines background related attributes of Card",
-      "type": "variant",
-      "values": ["alternative", "subtle", "grid", "feature", "plain"]
-    },
     "borderRadius": {
       "type": "variant",
       "values": ["none", "small", "large"]
@@ -165,78 +160,6 @@
         "borderRadius": 8
       }
     },
-    {
-      "if": {
-        "background": "alternative"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 0.87843,
-          "green": 0.84706,
-          "blue": 0.98824,
-          "alpha": 1
-        },
-        "borderRadius": 8,
-        "borderWidth": 0
-      }
-    },
-    {
-      "if": {
-        "background": "subtle"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 0.63137,
-          "green": 0.92941,
-          "blue": 0,
-          "alpha": 1
-        },
-        "borderWidth": 0
-      }
-    },
-    {
-      "if": {
-        "background": "grid"
-      },
-      "tokens": {
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 1
-        },
-        "borderWidth": 1
-      }
-    },
-    {
-      "if": {
-        "background": "feature"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 0.67843,
-          "blue": 0,
-          "alpha": 1
-        },
-        "borderRadius": 8,
-        "borderWidth": 0
-      }
-    },
-    {
-      "if": {
-        "background": "plain"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "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,
       "green": 0,

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.47843,
-          "green": 0.23922,
-          "blue": 0.98824,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "alternative": true,
-        "pressed": true
-      },
-      "tokens": {
-        "color": {
-          "red": 0.4,
-          "green": 0.4,
-          "blue": 0.4,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "inverse": true
-      },
-      "tokens": {
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "inverse": true,
-        "pressed": true
-      },
-      "tokens": {
-        "color": {
-          "red": 0.78824,
-          "green": 0.78431,
-          "blue": 0.78431,
-          "alpha": 1
-        }
-      }
-    },
     {
       "if": {
         "size": "large"

package/build/ios/ExpandCollapseMiniControl.json

@@ -1,20 +1,10 @@
 {
   "appearances": {
-    "alternative": {
-      "description": "Replaces the default green 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 green colour with white. Useful for dark backgrounds.",
-      "type": "variant",
-      "values": [true]
-    },
     "quiet": {
       "description": "When it is true, it does not show the decoration",
       "type": "state",
@@ -23,6 +13,10 @@
     "size": {
       "type": "variant",
       "values": ["micro", "small", "large"]
+    },
+    "style": {
+      "type": "variant",
+      "values": ["subtle", "inverse"]
     }
   },
   "rules": [
@@ -36,7 +30,7 @@
     },
     {
       "if": {
-        "alternative": true
+        "style": "subtle"
       },
       "tokens": {
         "color": {
@@ -49,7 +43,7 @@
     },
     {
       "if": {
-        "inverse": true
+        "style": "inverse"
       },
       "tokens": {
         "color": {
@@ -106,8 +100,8 @@
     },
     {
       "if": {
-        "alternative": true,
-        "quiet": true
+        "quiet": true,
+        "style": "subtle"
       },
       "tokens": {
         "color": {
@@ -121,8 +115,8 @@
     },
     {
       "if": {
-        "inverse": true,
-        "quiet": true
+        "quiet": true,
+        "style": "inverse"
       },
       "tokens": {
         "color": {