@telus-uds/theme-koodo 5.2.0 → 5.4.0

package/build/rn/spacingScale.js

@@ -0,0 +1,68 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 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: 12 }, tokens: { size: 120 } },
+    { if: { space: 11 }, 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:55:19 GMT
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
  *
  */
 
@@ -62,7 +62,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: [
         {
@@ -109,6 +109,21 @@ module.exports = {
             fontSize: 16
           }
         },
+        {
+          if: { purpose: 'subtle' },
+          tokens: {
+            backgroundColor: '#a1ed00',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#000000'
+          }
+        },
+        {
+          if: { outline: true, purpose: 'subtle' },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#a1ed00'
+          }
+        },
         {
           if: { outline: true, purpose: 'editorial' },
           tokens: {
@@ -1820,6 +1835,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: '#c9c8c8',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            bubbleBorderColor: '#7a3dfc',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            bubbleBorderColor: '#595959',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            bubbleBorderColor: '#000000',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        }
+      ],
+      tokens: {
+        borderColor: '#c9c8c8',
+        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 ] },
@@ -2191,7 +2290,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -3509,8 +3608,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',
@@ -3523,21 +3626,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: '#c5f2cc',
             borderColor: '#1c7b2b',
@@ -3547,7 +3665,7 @@ module.exports = {
           }
         },
         {
-          if: { style: 'warning' },
+          if: { validation: 'warning' },
           tokens: {
             backgroundColor: '#fff5d2',
             borderColor: '#f8c100',
@@ -3558,7 +3676,7 @@ module.exports = {
           }
         },
         {
-          if: { style: 'error' },
+          if: { validation: 'error' },
           tokens: {
             backgroundColor: '#fcd3c6',
             borderColor: '#c9370b',
@@ -3578,7 +3696,7 @@ module.exports = {
         borderRightWidth: 1,
         borderTopWidth: 1,
         color: '#000000',
-        dismissButtonGap: 16,
+        dismissButtonGap: 24,
         dismissIcon: PaletteIconClose,
         dismissIconColor: '#000000',
         fontName: 'StagSans',
@@ -4985,7 +5103,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -5599,6 +5717,7 @@ module.exports = {
           offsetY: 4,
           spread: 0
         },
+        display: null,
         fontColor: '#000000',
         fontName: 'StagSans',
         fontSize: 16,
@@ -6082,7 +6201,7 @@ module.exports = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success' ]
+          values: [ 'error', 'success', 'warning' ]
         }
       },
       rules: [
@@ -7049,5 +7168,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.47.0' }
+  metadata: { name: 'theme-koodo', 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:25 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: '#7a3dfc', size: 24, thickness: 2 }
+}
+export default theme

package/build/web/Badge.js

@@ -0,0 +1,99 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 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: 'rgba(0, 0, 0, 0)', borderColor: '#a1ed00' }
+    },
+    {
+      if: { alternative: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#dd0066',
+        color: '#dd0066',
+        fontSize: 16,
+        paddingBottom: 8,
+        paddingTop: 8
+      }
+    },
+    {
+      if: { purpose: 'offer' },
+      tokens: {
+        backgroundColor: '#7a3dfc',
+        color: '#ffffff',
+        fontSize: 16,
+        paddingBottom: 8,
+        paddingTop: 8
+      }
+    },
+    {
+      if: { purpose: 'editorial' },
+      tokens: { backgroundColor: '#ffad00', color: '#000000', fontSize: 16 }
+    },
+    {
+      if: { purpose: 'subtle' },
+      tokens: {
+        backgroundColor: '#a1ed00',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#000000'
+      }
+    },
+    {
+      if: { outline: true, purpose: 'subtle' },
+      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', borderColor: '#a1ed00' }
+    },
+    {
+      if: { outline: true, purpose: 'editorial' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#ffad00',
+        color: '#000000'
+      }
+    },
+    {
+      if: { outline: true, purpose: 'offer' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#7a3dfc',
+        color: '#000000'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#a1ed00',
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 32,
+    borderWidth: 2,
+    color: '#000000',
+    fontName: 'StagSans',
+    fontSize: 14,
+    fontWeight: '600',
+    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:25 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: 'StagSans',
+        titleHeadingFontSize: 32,
+        titleHeadingFontWeight: '700',
+        titleHeadingLineHeight: 1.25
+      }
+    }
+  ],
+  tokens: {
+    backgroundGradient: {
+      angle: 0,
+      stops: [ { color: '#000000', stop: 0 }, { color: '#000000', stop: 1 } ],
+      type: 'linear'
+    },
+    color: '#000000',
+    linkFontName: 'StagSans',
+    linkFontSize: 16,
+    linkFontWeight: '600',
+    linkLineHeight: 1.5,
+    marginBottom: 16,
+    paddingBottom: 16,
+    paddingLeft: 32,
+    paddingRight: 32,
+    paddingTop: 16,
+    titleFontName: 'StagSans',
+    titleFontSize: 20,
+    titleFontWeight: '400',
+    titleHeadingFontName: 'StagSans',
+    titleHeadingFontSize: 32,
+    titleHeadingFontWeight: '700',
+    titleHeadingLineHeight: 1.25,
+    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:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    background: {
+      description: 'Background colour of box. White 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: '#ffffff', borderColor: '#ffffff' }
+    },
+    {
+      if: { background: 'lighter' },
+      tokens: { backgroundColor: '#fafafa', borderColor: '#fafafa' }
+    },
+    {
+      if: { background: 'light' },
+      tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
+    },
+    {
+      if: { background: 'dark' },
+      tokens: { backgroundColor: '#666666', borderColor: '#666666' }
+    },
+    {
+      if: { background: 'darker' },
+      tokens: { backgroundColor: '#595959', borderColor: '#595959' }
+    },
+    {
+      if: { background: 'darkest' },
+      tokens: { backgroundColor: '#000000', borderColor: '#000000' }
+    },
+    {
+      if: { background: 'critical' },
+      tokens: { backgroundColor: '#c9370b', borderColor: '#c9370b' }
+    },
+    {
+      if: { background: 'danger' },
+      tokens: { backgroundColor: '#fcd3c6', borderColor: '#fcd3c6' }
+    },
+    {
+      if: { background: 'warning' },
+      tokens: { backgroundColor: '#fff5d2', borderColor: '#fff5d2' }
+    },
+    {
+      if: { background: 'positive' },
+      tokens: { backgroundColor: '#c5f2cc', borderColor: '#c5f2cc' }
+    },
+    {
+      if: { background: 'brand' },
+      tokens: { backgroundColor: '#7a3dfc', borderColor: '#7a3dfc' }
+    },
+    {
+      if: { background: 'white' },
+      tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
+    },
+    {
+      if: { background: 'black' },
+      tokens: { backgroundColor: '#000000', borderColor: '#000000' }
+    },
+    {
+      if: { background: 'featurePrimary' },
+      tokens: { backgroundColor: '#a1ed00', borderColor: '#a1ed00' }
+    },
+    {
+      if: { background: 'featureSecondary' },
+      tokens: { backgroundColor: '#ff0076', borderColor: '#ff0076' }
+    },
+    {
+      if: { background: 'featureNeutral' },
+      tokens: { backgroundColor: '#ffad00', borderColor: '#ffad00' }
+    },
+    {
+      if: { background: 'featureBrand' },
+      tokens: { backgroundColor: '#e0d8fc', borderColor: '#e0d8fc' }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    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:25 GMT
+ *
+ */
+
+import PaletteIconChevronRight from '@telus-uds/palette-koodo/build/rn/icons/ChevronRight'
+const theme = {
+  appearances: { inverse: { type: 'variant', values: [ true ] } },
+  rules: [
+    {
+      if: { inverse: true },
+      tokens: {
+        color: '#ffffff',
+        currentColor: '#ffffff',
+        iconColor: '#c9c8c8'
+      }
+    }
+  ],
+  tokens: {
+    color: '#000000',
+    currentColor: '#000000',
+    fontName: 'StagSans',
+    fontSize: 14,
+    fontWeight: '600',
+    icon: PaletteIconChevronRight,
+    iconColor: '#000000',
+    iconPadding: 4,
+    iconSize: 20,
+    listItemPadding: 0
+  }
+}
+export default theme