@telus-uds/theme-public-mobile 2.11.0 → 2.13.0

package/build/ios/spacingScale.json

@@ -0,0 +1,131 @@
+{
+  "appearances": {
+    "space": {
+      "description": "Index of the intended position on the spacing scale",
+      "values": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      "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": {
+        "size": 112
+      }
+    },
+    {
+      "if": {
+        "space": 11
+      },
+      "tokens": {
+        "size": 80
+      }
+    },
+    {
+      "if": {
+        "space": 12
+      },
+      "tokens": {
+        "size": 112
+      }
+    },
+    {
+      "if": {
+        "space": 10
+      },
+      "tokens": {
+        "size": 64
+      }
+    },
+    {
+      "if": {
+        "space": 9
+      },
+      "tokens": {
+        "size": 56
+      }
+    },
+    {
+      "if": {
+        "space": 8
+      },
+      "tokens": {
+        "size": 48
+      }
+    },
+    {
+      "if": {
+        "space": 7
+      },
+      "tokens": {
+        "size": 40
+      }
+    },
+    {
+      "if": {
+        "space": 6
+      },
+      "tokens": {
+        "size": 32
+      }
+    },
+    {
+      "if": {
+        "space": 5
+      },
+      "tokens": {
+        "size": 24
+      }
+    },
+    {
+      "if": {
+        "space": 4
+      },
+      "tokens": {
+        "size": 16
+      }
+    },
+    {
+      "if": {
+        "space": 3
+      },
+      "tokens": {
+        "size": 12
+      }
+    },
+    {
+      "if": {
+        "space": 2
+      },
+      "tokens": {
+        "size": 8
+      }
+    },
+    {
+      "if": {
+        "space": 1
+      },
+      "tokens": {
+        "size": 4
+      }
+    },
+    {
+      "if": {
+        "space": 0
+      },
+      "tokens": {
+        "size": 0
+      }
+    }
+  ],
+  "tokens": {
+    "size": 80
+  }
+}

package/build/ios/theme.json

@@ -46,7 +46,7 @@
         },
         "purpose": {
           "type": "variant",
-          "values": ["offer", "editorial"]
+          "values": ["offer", "editorial", "subtle"]
         }
       },
       "rules": [
@@ -157,6 +157,45 @@
             }
           }
         },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
+              "alpha": 1
+            }
+          }
+        },
         {
           "if": {
             "outline": true,
@@ -3008,6 +3047,91 @@
         "textLine": "none"
       }
     },
+    "ColourToggle": {
+      "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": {
+            "pressed": true
+          },
+          "tokens": {
+            "bubbleBorderColor": {
+              "red": 0.16863,
+              "green": 0.19216,
+              "blue": 0.27059,
+              "alpha": 1
+            },
+            "bubbleBorderRadius": 45,
+            "bubbleBorderWidth": 1
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "bubbleBorderColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            },
+            "bubbleBorderRadius": 45,
+            "bubbleBorderWidth": 1
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": {
+          "red": 0.61176,
+          "green": 0.62353,
+          "blue": 0.66667,
+          "alpha": 1
+        },
+        "borderRadius": 45,
+        "borderWidth": 1,
+        "bubbleBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "bubbleBorderRadius": 0,
+        "bubbleBorderWidth": 0,
+        "innerBubbleBorderRadius": 45,
+        "innerBubbleHeight": 40,
+        "innerBubbleWidth": 40,
+        "outerBubbleContentAlignItems": "center",
+        "outerBubbleHeight": 48,
+        "outerBubbleJustifyContent": "center",
+        "outerBubbleWidth": 48,
+        "shadow": {
+          "inset": true,
+          "offsetX": 0,
+          "offsetY": 2,
+          "blur": 2,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0.1
+          }
+        },
+        "space": 2
+      }
+    },
     "Countdown": {
       "appearances": {
         "feature": {
@@ -3779,7 +3903,7 @@
         },
         "validation": {
           "description": "Validation states for form inputs",
-          "values": ["error", "success"],
+          "values": ["error", "success", "warning"],
           "type": "state"
         }
       },
@@ -5821,10 +5945,11 @@
       "appearances": {
         "style": {
           "type": "variant",
-          "values": ["success", "warning", "error"]
+          "values": ["system", "subtle"]
         },
-        "system": {
-          "values": [true],
+        "validation": {
+          "description": "Validation states for form inputs",
+          "values": ["error", "success", "warning"],
           "type": "state"
         },
         "viewport": {
@@ -5844,23 +5969,40 @@
         },
         {
           "if": {
-            "system": true
+            "style": "system"
           },
           "tokens": {
             "borderLeftWidth": 0,
             "borderRadius": 0,
             "borderRightWidth": 0,
             "borderTopWidth": 0,
-            "iconGap": 12,
-            "paddingBottom": 16,
-            "paddingLeft": 16,
-            "paddingRight": 16,
-            "paddingTop": 16
+            "iconGap": 16,
+            "paddingBottom": 12,
+            "paddingLeft": 12,
+            "paddingRight": 12,
+            "paddingTop": 12
+          }
+        },
+        {
+          "if": {
+            "style": "subtle"
+          },
+          "tokens": {
+            "borderBottomWidth": 0,
+            "borderLeftWidth": 0,
+            "borderRadius": 0,
+            "borderRightWidth": 0,
+            "borderTopWidth": 0,
+            "iconGap": 16,
+            "paddingBottom": 12,
+            "paddingLeft": 12,
+            "paddingRight": 12,
+            "paddingTop": 12
           }
         },
         {
           "if": {
-            "style": "success"
+            "validation": "success"
           },
           "tokens": {
             "backgroundColor": {
@@ -5892,7 +6034,7 @@
         },
         {
           "if": {
-            "style": "warning"
+            "validation": "warning"
           },
           "tokens": {
             "backgroundColor": {
@@ -5913,7 +6055,7 @@
         },
         {
           "if": {
-            "style": "error"
+            "validation": "error"
           },
           "tokens": {
             "backgroundColor": {
@@ -5963,7 +6105,7 @@
           "blue": 0.33725,
           "alpha": 1
         },
-        "dismissButtonGap": 18,
+        "dismissButtonGap": 12,
         "dismissIcon": "PaletteIconMobileXClose",
         "dismissIconColor": {
           "red": 0.22353,
@@ -7692,7 +7834,7 @@
       "appearances": {
         "purpose": {
           "type": "variant",
-          "values": ["offer", "default", "editorial"]
+          "values": ["offer", "default", "editorial", "subtle"]
         },
         "wrap": {
           "type": "variant",
@@ -7732,6 +7874,19 @@
             }
           }
         },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            }
+          }
+        },
         {
           "if": {
             "wrap": true
@@ -8058,7 +8213,7 @@
         },
         "validation": {
           "description": "Validation states for form inputs",
-          "values": ["error", "success"],
+          "values": ["error", "success", "warning"],
           "type": "state"
         }
       },
@@ -9012,6 +9167,7 @@
             "alpha": 0.1
           }
         },
+        "display": null,
         "fontColor": {
           "red": 0.22353,
           "green": 0.25098,
@@ -9728,7 +9884,7 @@
         },
         "validation": {
           "description": "Validation states for form inputs",
-          "values": ["error", "success"],
+          "values": ["error", "success", "warning"],
           "type": "state"
         }
       },
@@ -11441,7 +11597,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.47.0",
+    "themeTokensVersion": "2.49.0",
     "name": "theme-public-mobile"
   }
 }

package/build/rn/ActivityIndicator.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    size: {
+      description: 'used for full-screen spinners',
+      type: 'variant',
+      values: [ 'large' ]
+    }
+  },
+  rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
+  tokens: { color: '#394056', size: 24, thickness: 2 }
+}

package/build/rn/Badge.js

@@ -0,0 +1,83 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    alternative: { type: 'variant', values: [ true ] },
+    inverse: { type: 'variant', values: [ true ] },
+    outline: { type: 'variant', values: [ true ] },
+    purpose: { type: 'variant', values: [ 'offer', 'editorial', 'subtle' ] }
+  },
+  rules: [
+    {
+      if: { inverse: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#ffffff',
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { alternative: true },
+      tokens: {
+        backgroundColor: '#eaf3f1',
+        borderColor: '#eaf3f1',
+        color: '#2b826e'
+      }
+    },
+    {
+      if: { outline: true },
+      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', borderColor: '#f9f2dd' }
+    },
+    {
+      if: { purpose: 'offer' },
+      tokens: { backgroundColor: '#fce6df', borderColor: '#fce6df' }
+    },
+    {
+      if: { purpose: 'editorial' },
+      tokens: { backgroundColor: '#cdcfd5', borderColor: '#cdcfd5' }
+    },
+    {
+      if: { purpose: 'subtle' },
+      tokens: { backgroundColor: '#f9f2dd', borderColor: '#f9f2dd' }
+    },
+    {
+      if: { outline: true, purpose: 'subtle' },
+      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', borderColor: '#f9f2dd' }
+    },
+    {
+      if: { outline: true, purpose: 'editorial' },
+      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', borderColor: '#cdcfd5' }
+    },
+    {
+      if: { outline: true, purpose: 'offer' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#fce6df',
+        borderWidth: 2,
+        color: '#394056'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#f9f2dd',
+    borderColor: '#f9f2dd',
+    borderRadius: 999,
+    borderWidth: 2,
+    color: '#394056',
+    fontName: 'SofiaPro',
+    fontSize: 12,
+    fontWeight: '400',
+    gradient: null,
+    paddingBottom: 2,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 2
+  }
+}

package/build/rn/BlockQuote.js

@@ -0,0 +1,55 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    }
+  },
+  rules: [
+    {
+      if: { viewport: [ 'xs', 'sm', 'md' ] },
+      tokens: {
+        titleHeadingFontName: 'SofiaPro',
+        titleHeadingFontSize: 30,
+        titleHeadingFontWeight: '700',
+        titleHeadingLineHeight: 1.2
+      }
+    }
+  ],
+  tokens: {
+    backgroundGradient: {
+      angle: 0,
+      stops: [ { color: '#f39d80', stop: 0 }, { color: '#f39d80', stop: 1 } ],
+      type: 'linear'
+    },
+    color: '#394056',
+    linkFontName: 'SofiaPro',
+    linkFontSize: 18,
+    linkFontWeight: '700',
+    linkLineHeight: 1.55555555,
+    marginBottom: 16,
+    paddingBottom: 16,
+    paddingLeft: 32,
+    paddingRight: 32,
+    paddingTop: 16,
+    titleFontName: 'SofiaPro',
+    titleFontSize: 20,
+    titleFontWeight: '400',
+    titleHeadingFontName: 'SofiaPro',
+    titleHeadingFontSize: 30,
+    titleHeadingFontWeight: '700',
+    titleHeadingLineHeight: 1.2,
+    titleLineHeight: 1.4,
+    width: 4
+  }
+}

package/build/rn/Box.js

@@ -0,0 +1,108 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    background: {
+      description: 'Background colour of box. No background color if not specified',
+      type: 'variant',
+      values: [
+        'lightest',         'lighter',
+        'light',            'dark',
+        'darker',           'darkest',
+        'critical',         'danger',
+        'warning',          'positive',
+        'brand',            'white',
+        'black',            'featurePrimary',
+        'featureSecondary', 'featureNeutral',
+        'featureBrand'
+      ]
+    }
+  },
+  rules: [
+    {
+      if: { background: 'lightest' },
+      tokens: { backgroundColor: '#fefefc', borderColor: '#fefefc' }
+    },
+    {
+      if: { background: 'lighter' },
+      tokens: { backgroundColor: '#fdfcf6', borderColor: '#fdfcf6' }
+    },
+    {
+      if: { background: 'light' },
+      tokens: { backgroundColor: '#fcf8ee', borderColor: '#fcf8ee' }
+    },
+    {
+      if: { background: 'dark' },
+      tokens: { backgroundColor: '#6a7080', borderColor: '#6a7080' }
+    },
+    {
+      if: { background: 'darker' },
+      tokens: { backgroundColor: '#394056', borderColor: '#394056' }
+    },
+    {
+      if: { background: 'darkest' },
+      tokens: { backgroundColor: '#2b3145', borderColor: '#2b3145' }
+    },
+    {
+      if: { background: 'critical' },
+      tokens: { backgroundColor: '#bf1722', borderColor: '#bf1722' }
+    },
+    {
+      if: { background: 'danger' },
+      tokens: { backgroundColor: '#f9e8e9', borderColor: '#f9e8e9' }
+    },
+    {
+      if: { background: 'warning' },
+      tokens: { backgroundColor: '#fcf8ee', borderColor: '#fcf8ee' }
+    },
+    {
+      if: { background: 'positive' },
+      tokens: { backgroundColor: '#eaf3f1', borderColor: '#eaf3f1' }
+    },
+    {
+      if: { background: 'brand' },
+      tokens: { backgroundColor: '#394056', borderColor: '#394056' }
+    },
+    {
+      if: { background: 'white' },
+      tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
+    },
+    {
+      if: { background: 'black' },
+      tokens: { backgroundColor: '#2b3145', borderColor: '#2b3145' }
+    },
+    {
+      if: { background: 'featurePrimary' },
+      tokens: { backgroundColor: '#f6b5a0', borderColor: '#f6b5a0' }
+    },
+    {
+      if: { background: 'featureSecondary' },
+      tokens: { backgroundColor: '#f9cebf', borderColor: '#f9cebf' }
+    },
+    {
+      if: { background: 'featureNeutral' },
+      tokens: { backgroundColor: '#fce6df', borderColor: '#fce6df' }
+    },
+    {
+      if: { background: 'featureBrand' },
+      tokens: { backgroundColor: '#f39d80', borderColor: '#f39d80' }
+    }
+  ],
+  tokens: {
+    backgroundColor: null,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderColor: null,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderWidth: 0,
+    gradient: null
+  }
+}