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

package/build/rn/spacingScale.js

@@ -0,0 +1,44 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:14 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    space: {
+      description: 'Index of the intended position on the spacing scale',
+      type: 'state',
+      values: [
+         0, 1, 2, 3,  4,  5,
+         6, 7, 8, 9, 10, 11,
+        12
+      ]
+    },
+    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: [ '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/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 01 Dec 2023 20:55:27 GMT
+ * Generated on Mon, 08 Jan 2024 20:06:14 GMT
  *
  */
 
@@ -67,7 +67,7 @@ module.exports = {
         alternative: { type: 'variant', values: [ true ] },
         inverse: { type: 'variant', values: [ true ] },
         outline: { type: 'variant', values: [ true ] },
-        purpose: { type: 'variant', values: [ 'offer', 'editorial' ] }
+        purpose: { type: 'variant', values: [ 'offer', 'editorial', 'subtle' ] }
       },
       rules: [
         {
@@ -101,6 +101,17 @@ module.exports = {
           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: {
@@ -1791,6 +1802,90 @@ module.exports = {
         textLine: 'none'
       }
     },
+    ColourToggle: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        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.',
+          type: 'state',
+          values: [ true, false ]
+        },
+        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`.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            bubbleBorderColor: '#cdcfd5',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            bubbleBorderColor: '#6a7080',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            bubbleBorderColor: '#2b3145',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            bubbleBorderColor: '#394056',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        }
+      ],
+      tokens: {
+        borderColor: '#9c9faa',
+        borderRadius: 45,
+        borderWidth: 1,
+        bubbleBorderColor: 'rgba(0, 0, 0, 0)',
+        bubbleBorderRadius: 0,
+        bubbleBorderWidth: 0,
+        innerBubbleBorderRadius: 45,
+        innerBubbleHeight: 40,
+        innerBubbleWidth: 40,
+        outerBubbleContentAlignItems: 'center',
+        outerBubbleHeight: 48,
+        outerBubbleJustifyContent: 'center',
+        outerBubbleWidth: 48,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: true,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        },
+        space: 2
+      }
+    },
     Countdown: {
       appearances: {
         feature: { type: 'variant', values: [ true ] },
@@ -2209,7 +2304,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -3535,8 +3630,12 @@ module.exports = {
     },
     Notification: {
       appearances: {
-        style: { type: 'variant', values: [ 'success', 'warning', 'error' ] },
-        system: { type: 'state', values: [ true ] },
+        style: { type: 'variant', values: [ 'system', 'subtle' ] },
+        validation: {
+          description: 'Validation states for form inputs',
+          type: 'state',
+          values: [ 'error', 'success', 'warning' ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -3549,21 +3648,36 @@ module.exports = {
           tokens: { justifyContent: 'center' }
         },
         {
-          if: { system: true },
+          if: { 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' },
+          if: { validation: 'success' },
           tokens: {
             backgroundColor: '#2b826e',
             color: '#ffffff',
@@ -3573,7 +3687,7 @@ module.exports = {
           }
         },
         {
-          if: { style: 'warning' },
+          if: { validation: 'warning' },
           tokens: {
             backgroundColor: '#fce6df',
             dismissIcon: null,
@@ -3582,7 +3696,7 @@ module.exports = {
           }
         },
         {
-          if: { style: 'error' },
+          if: { validation: 'error' },
           tokens: {
             backgroundColor: '#bf1722',
             color: '#ffffff',
@@ -3601,7 +3715,7 @@ module.exports = {
         borderRightWidth: 0,
         borderTopWidth: 0,
         color: '#394056',
-        dismissButtonGap: 18,
+        dismissButtonGap: 12,
         dismissIcon: PaletteIconMobileXClose,
         dismissIconColor: '#394056',
         fontName: 'SofiaPro',
@@ -4783,7 +4897,7 @@ module.exports = {
       appearances: {
         purpose: {
           type: 'variant',
-          values: [ 'offer', 'default', 'editorial' ]
+          values: [ 'offer', 'default', 'editorial', 'subtle' ]
         },
         wrap: { type: 'variant', values: [ true ] }
       },
@@ -4796,6 +4910,10 @@ module.exports = {
           if: { purpose: 'offer' },
           tokens: { backgroundColor: '#394056' }
         },
+        {
+          if: { purpose: 'subtle' },
+          tokens: { backgroundColor: '#394056' }
+        },
         {
           if: { wrap: true },
           tokens: {
@@ -5007,7 +5125,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -5544,6 +5662,7 @@ module.exports = {
           offsetY: 4,
           spread: 0
         },
+        display: null,
         fontColor: '#394056',
         fontName: 'SofiaPro',
         fontSize: 18,
@@ -6009,7 +6128,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -6927,5 +7046,5 @@ module.exports = {
       tokens: { size: 80 }
     }
   },
-  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.47.0' }
+  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.49.0' }
 }

package/build/web/ActivityIndicator.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:31 GMT
+ *
+ */
+
+
+const theme = {
+  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 }
+}
+export default theme

package/build/web/Badge.js

@@ -0,0 +1,83 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:31 GMT
+ *
+ */
+
+
+const theme = {
+  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
+  }
+}
+export default theme

package/build/web/BlockQuote.js

@@ -0,0 +1,55 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:31 GMT
+ *
+ */
+
+
+const theme = {
+  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
+  }
+}
+export default theme

package/build/web/Box.js

@@ -0,0 +1,108 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:31 GMT
+ *
+ */
+
+
+const theme = {
+  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
+  }
+}
+export default theme

package/build/web/Breadcrumbs.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:31 GMT
+ *
+ */
+
+import PaletteIconChevronRight from '@telus-uds/palette-public-mobile/build/rn/icons/ChevronRight'
+const theme = {
+  appearances: { inverse: { type: 'variant', values: [ true ] } },
+  rules: [
+    {
+      if: { inverse: true },
+      tokens: {
+        color: '#f9f2dd',
+        currentColor: '#f5f5f7',
+        iconColor: '#9c9faa'
+      }
+    }
+  ],
+  tokens: {
+    color: '#636c8c',
+    currentColor: '#394056',
+    fontName: 'SofiaPro',
+    fontSize: 16,
+    fontWeight: '400',
+    icon: PaletteIconChevronRight,
+    iconColor: '#9c9faa',
+    iconPadding: 4,
+    iconSize: 24,
+    listItemPadding: 0
+  }
+}
+export default theme