@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/rn/spacingScale.js

@@ -0,0 +1,68 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 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 Wed, 13 Dec 2023 21:13:01 GMT
+ * Generated on Thu, 18 Jan 2024 22:41:54 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: {
@@ -2265,7 +2282,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -2412,7 +2429,9 @@ module.exports = {
         headerLineHeight: 1.5,
         headerMargin: 16,
         listItemColor: '#414547',
+        listItemFontName: 'HelveticaNow',
         listItemFontSize: 16,
+        listItemFontWeight: '400',
         listItemLineHeight: 1.5,
         listItemMarkerFontSize: 16,
         listItemMarkerLineHeight: 1.5,
@@ -2426,6 +2445,7 @@ module.exports = {
       tokens: {
         color: null,
         fontName: 'HelveticaNow',
+        fontSize: 16,
         fontWeight: '400',
         lineHeight: 1,
         paddingLeft: 2,
@@ -3573,8 +3593,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',
@@ -3587,21 +3611,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',
@@ -3610,7 +3649,7 @@ module.exports = {
           }
         },
         {
-          if: { style: 'warning' },
+          if: { validation: 'warning' },
           tokens: {
             backgroundColor: '#fff9ee',
             borderColor: '#b4872c',
@@ -3620,7 +3659,7 @@ module.exports = {
           }
         },
         {
-          if: { style: 'error' },
+          if: { validation: 'error' },
           tokens: {
             backgroundColor: '#fff6f8',
             borderColor: '#e12339',
@@ -3639,15 +3678,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,
@@ -4816,7 +4855,7 @@ module.exports = {
       appearances: {
         purpose: {
           type: 'variant',
-          values: [ 'offer', 'default', 'editorial' ]
+          values: [ 'offer', 'default', 'editorial', 'subtle' ]
         },
         wrap: { type: 'variant', values: [ true ] }
       },
@@ -4844,6 +4883,10 @@ module.exports = {
         {
           if: { wrap: true },
           tokens: { paddingLeft: 24, paddingRight: 24 }
+        },
+        {
+          if: { purpose: 'subtle' },
+          tokens: { backgroundColor: '#7c53a5' }
         }
       ],
       tokens: {
@@ -5050,7 +5093,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -5664,6 +5707,7 @@ module.exports = {
           offsetY: 4,
           spread: 0
         },
+        display: null,
         fontColor: '#000000',
         fontName: 'HelveticaNow',
         fontSize: 16,
@@ -6123,7 +6167,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -6852,7 +6896,7 @@ module.exports = {
         }
       ],
       tokens: {
-        color: '#2c2e30',
+        color: '#414547',
         fontName: 'HelveticaNow',
         fontScaleCap: 64,
         fontSize: 16,
@@ -7130,5 +7174,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.48.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.50.0' }
 }

package/build/web/ActivityIndicator.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 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 Thu, 18 Jan 2024 22:42:16 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 Thu, 18 Jan 2024 22:42:16 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