@telus-uds/theme-allium 4.20.0 → 4.22.0

package/build/rn/spacingScale.js

@@ -0,0 +1,68 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 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: 120 } },
+    { if: { space: 11 }, tokens: { size: 96 } },
+    { if: { space: 12 }, tokens: { size: 120 } },
+    { if: { space: 10 }, tokens: { size: 80 } },
+    { if: { space: 9 }, tokens: { size: 64 } },
+    { if: { space: 8 }, tokens: { size: 48 } },
+    { if: { space: 7 }, tokens: { size: 40 } },
+    { if: { space: 6 }, tokens: { size: 36 } },
+    { if: { space: 5 }, tokens: { size: 32 } },
+    { if: { space: 4 }, tokens: { size: 24 } },
+    { if: { space: 3 }, tokens: { size: 16 } },
+    { if: { space: 2 }, tokens: { size: 8 } },
+    { if: { space: 1 }, tokens: { size: 4 } },
+    {
+      if: { space: 11, viewport: [ 'lg', 'xl' ] },
+      tokens: { size: 120 }
+    },
+    {
+      if: { space: 10, viewport: [ 'lg', 'xl' ] },
+      tokens: { size: 96 }
+    },
+    {
+      if: { space: 9, viewport: [ 'lg', 'xl' ] },
+      tokens: { size: 72 }
+    },
+    {
+      if: { space: 8, viewport: [ 'lg', 'xl' ] },
+      tokens: { size: 64 }
+    },
+    {
+      if: { space: 7, viewport: [ 'lg', 'xl' ] },
+      tokens: { size: 48 }
+    },
+    {
+      if: { space: 6, viewport: [ 'lg', 'xl' ] },
+      tokens: { size: 40 }
+    },
+    { if: { space: 0 }, tokens: { size: 0 } }
+  ],
+  tokens: { size: 96 }
+}

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 01 Dec 2023 20:56:16 GMT
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
  *
  */
 
@@ -20,6 +20,7 @@ const PaletteIconExpand = require('@telus-uds/palette-allium/build/rn/icons/Expa
 const PaletteIconChevronLeft = require('@telus-uds/palette-allium/build/rn/icons/ChevronLeft')
 const PaletteIconPlayVideo = require('@telus-uds/palette-allium/build/rn/icons/PlayVideo')
 const PaletteIconBulletFill = require('@telus-uds/palette-allium/build/rn/icons/BulletFill')
+const PaletteIconStatusInfo = require('@telus-uds/palette-allium/build/rn/icons/StatusInfo')
 const PaletteIconStatusWarning = require('@telus-uds/palette-allium/build/rn/icons/StatusWarning')
 const PaletteIconTimes = require('@telus-uds/palette-allium/build/rn/icons/Times')
 const PaletteIconSearchBold = require('@telus-uds/palette-allium/build/rn/icons/SearchBold')
@@ -60,7 +61,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: [
         {
@@ -89,6 +90,14 @@ module.exports = {
             }
           }
         },
+        {
+          if: { purpose: 'subtle' },
+          tokens: {
+            backgroundColor: '#7c53a5',
+            borderColor: '#7c53a5',
+            color: '#ffffff'
+          }
+        },
         {
           if: { purpose: 'offer' },
           tokens: {
@@ -115,6 +124,14 @@ module.exports = {
             color: '#ffffff'
           }
         },
+        {
+          if: { outline: true, purpose: 'subtle' },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#7c53a5',
+            color: '#7c53a5'
+          }
+        },
         {
           if: { outline: true, purpose: 'editorial' },
           tokens: {
@@ -1843,6 +1860,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: '#b2b9bf',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            bubbleBorderColor: '#676e73',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            bubbleBorderColor: '#e3e6e8',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            bubbleBorderColor: '#4b286d',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        }
+      ],
+      tokens: {
+        borderColor: '#e3e6e8',
+        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 ] },
@@ -2181,7 +2282,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -3489,8 +3590,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',
@@ -3503,21 +3608,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: 8,
+            paddingBottom: 12,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 12
+          }
+        },
+        {
+          if: { style: 'subtle' },
+          tokens: {
+            borderBottomWidth: 0,
+            borderLeftWidth: 0,
+            borderRadius: 0,
+            borderRightWidth: 0,
+            borderTopWidth: 0,
+            iconGap: 8,
+            paddingBottom: 12,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 12
           }
         },
         {
-          if: { style: 'success' },
+          if: { validation: 'success' },
           tokens: {
             backgroundColor: '#f4f9f2',
             borderColor: '#2b8000',
@@ -3526,7 +3646,7 @@ module.exports = {
           }
         },
         {
-          if: { style: 'warning' },
+          if: { validation: 'warning' },
           tokens: {
             backgroundColor: '#fff9ee',
             borderColor: '#b4872c',
@@ -3536,7 +3656,7 @@ module.exports = {
           }
         },
         {
-          if: { style: 'error' },
+          if: { validation: 'error' },
           tokens: {
             backgroundColor: '#fff6f8',
             borderColor: '#e12339',
@@ -3555,15 +3675,15 @@ module.exports = {
         borderRightWidth: 1,
         borderTopWidth: 1,
         color: '#414547',
-        dismissButtonGap: 16,
+        dismissButtonGap: 24,
         dismissIcon: PaletteIconClose,
         dismissIconColor: '#676e73',
         fontName: 'HelveticaNow',
         fontSize: 16,
         fontWeight: '400',
-        icon: null,
-        iconColor: null,
-        iconGap: 16,
+        icon: PaletteIconStatusInfo,
+        iconColor: '#4b286d',
+        iconGap: 8,
         iconSize: 24,
         justifyContent: 'flex-start',
         lineHeight: 1.5,
@@ -4732,7 +4852,7 @@ module.exports = {
       appearances: {
         purpose: {
           type: 'variant',
-          values: [ 'offer', 'default', 'editorial' ]
+          values: [ 'offer', 'default', 'editorial', 'subtle' ]
         },
         wrap: { type: 'variant', values: [ true ] }
       },
@@ -4760,6 +4880,10 @@ module.exports = {
         {
           if: { wrap: true },
           tokens: { paddingLeft: 24, paddingRight: 24 }
+        },
+        {
+          if: { purpose: 'subtle' },
+          tokens: { backgroundColor: '#7c53a5' }
         }
       ],
       tokens: {
@@ -4966,7 +5090,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -5580,6 +5704,7 @@ module.exports = {
           offsetY: 4,
           spread: 0
         },
+        display: null,
         fontColor: '#000000',
         fontName: 'HelveticaNow',
         fontSize: 16,
@@ -6039,7 +6164,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -7046,5 +7171,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.47.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.49.0' }
 }

package/build/web/ActivityIndicator.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 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: '#2b8000', size: 24, thickness: 2 }
+}
+export default theme

package/build/web/Badge.js

@@ -0,0 +1,129 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 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: { outline: true },
+      tokens: { backgroundColor: '#ffffff', color: '#613889' }
+    },
+    {
+      if: { alternative: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        gradient: {
+          angle: 135,
+          stops: [
+            { color: '#00784a', stop: 0 },
+            { color: '#66cc00', stop: 1 }
+          ],
+          type: 'linear'
+        }
+      }
+    },
+    {
+      if: { purpose: 'subtle' },
+      tokens: {
+        backgroundColor: '#7c53a5',
+        borderColor: '#7c53a5',
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { purpose: 'offer' },
+      tokens: {
+        borderWidth: 0,
+        gradient: {
+          angle: 135,
+          stops: [
+            { color: '#4b286d', stop: 0 },
+            { color: '#e53293', stop: 1 }
+          ],
+          type: 'linear'
+        },
+        paddingBottom: 4,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 4
+      }
+    },
+    {
+      if: { purpose: 'editorial' },
+      tokens: {
+        backgroundColor: '#676e73',
+        borderColor: '#676e73',
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { outline: true, purpose: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#7c53a5',
+        color: '#7c53a5'
+      }
+    },
+    {
+      if: { outline: true, purpose: 'editorial' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#676e73',
+        color: '#676e73'
+      }
+    },
+    {
+      if: { outline: true, purpose: 'offer' },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 2,
+        gradient: {
+          angle: 135,
+          stops: [
+            { color: '#4b286d', stop: 0 },
+            { color: '#e53293', stop: 1 }
+          ],
+          type: 'linear'
+        },
+        paddingBottom: 2,
+        paddingLeft: 8,
+        paddingRight: 8,
+        paddingTop: 2
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#613889',
+    borderColor: '#613889',
+    borderRadius: 4,
+    borderWidth: 2,
+    color: '#ffffff',
+    fontName: 'HelveticaNow',
+    fontSize: 12,
+    fontWeight: '700',
+    gradient: null,
+    paddingBottom: 2,
+    paddingLeft: 8,
+    paddingRight: 8,
+    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:07:10 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: 'HelveticaNow',
+        titleHeadingFontSize: 24,
+        titleHeadingFontWeight: '400',
+        titleHeadingLineHeight: 1.33333333333
+      }
+    }
+  ],
+  tokens: {
+    backgroundGradient: {
+      angle: 135,
+      stops: [ { color: '#4b286d', stop: 0 }, { color: '#e53293', stop: 1 } ],
+      type: 'linear'
+    },
+    color: '#414547',
+    linkFontName: 'HelveticaNow',
+    linkFontSize: 16,
+    linkFontWeight: '700',
+    linkLineHeight: 1.5,
+    marginBottom: 16,
+    paddingBottom: 16,
+    paddingLeft: 32,
+    paddingRight: 32,
+    paddingTop: 16,
+    titleFontName: 'HelveticaNow',
+    titleFontSize: 20,
+    titleFontWeight: '400',
+    titleHeadingFontName: 'HelveticaNow',
+    titleHeadingFontSize: 28,
+    titleHeadingFontWeight: '400',
+    titleHeadingLineHeight: 1.28571428571,
+    titleLineHeight: 1.6,
+    width: 2
+  }
+}
+export default theme