@telus-uds/theme-koodo 3.23.0 → 3.25.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 24 Apr 2023 21:32:41 GMT
+ * Generated on Mon, 01 May 2023 22:00:59 GMT
  *
  */
 
@@ -27,6 +27,7 @@ const PaletteIconCheckCircledNotFilled = require('@telus-uds/palette-koodo/build
 const PaletteIconEyeMasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeMasked')
 const PaletteIconEyeUnmasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeUnmasked')
 const PaletteIconInfo = require('@telus-uds/palette-koodo/build/rn/icons/Info')
+const PaletteIconSettings = require('@telus-uds/palette-koodo/build/rn/icons/Settings')
 
 module.exports = {
   components: {
@@ -39,7 +40,7 @@ module.exports = {
         }
       },
       rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
-      tokens: { color: '#016b6a', size: 40, thickness: 4 }
+      tokens: { color: '#016b6a', size: 24, thickness: 2 }
     },
     Badge: {
       appearances: {
@@ -211,7 +212,7 @@ module.exports = {
           tokens: { backgroundColor: '#016b6a' }
         }
       ],
-      tokens: { backgroundColor: '#ffffff', gradient: null }
+      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', gradient: null }
     },
     Breadcrumbs: {
       appearances: { inverse: { type: 'variant', values: [ true ] } },
@@ -268,10 +269,15 @@ module.exports = {
           type: 'variant',
           values: [ true ]
         },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        },
         width: {
-          description: 'Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.',
+          description: 'Available in default, full-width or responsive. Default-width expands based on content. Full-width expands to width of the container. Responsive automatically applies full-width when is displayed on the XS viewport.',
           type: 'variant',
-          values: [ 'full' ]
+          values: [ 'full', 'responsive' ]
         }
       },
       rules: [
@@ -407,6 +413,10 @@ module.exports = {
           }
         },
         { if: { width: 'full' }, tokens: { width: '100%' } },
+        {
+          if: { viewport: [ 'xs' ], width: 'responsive' },
+          tokens: { width: '100%' }
+        },
         {
           if: { size: 'small' },
           tokens: {
@@ -858,17 +868,21 @@ module.exports = {
       }
     },
     Callout: {
-      appearances: { size: { type: 'variant', values: [ 'small' ] } },
+      appearances: {
+        rounded: { type: 'variant', values: [ true ] },
+        size: { type: 'variant', values: [ 'small' ] }
+      },
       rules: [
         {
           if: { size: 'small' },
           tokens: { paddingBottom: 4, paddingTop: 4 }
-        }
+        },
+        { if: { rounded: true }, tokens: { borderRadius: 4 } }
       ],
       tokens: {
-        background: '#efefef',
-        borderRadius: 4,
-        color: '#000000',
+        background: '#fae6f4',
+        borderRadius: 0,
+        color: '#7c1366',
         gap: 16,
         paddingBottom: 8,
         paddingLeft: 16,
@@ -1207,20 +1221,20 @@ module.exports = {
         },
         {
           if: { size: 'large' },
-          tokens: { height: 48, iconSize: 24, textLineHeight: 2.15 }
+          tokens: { fontSize: 20, iconSize: 24, textLineHeight: 2.15 }
         },
         {
           if: { size: 'small' },
-          tokens: { height: 36, iconSize: 16, textLineHeight: 2.15 }
+          tokens: { fontSize: 14, iconSize: 16, textLineHeight: 2.15 }
         },
         {
           if: { size: 'micro' },
-          tokens: { height: 32, iconSize: 16, textLineHeight: 2.25 }
+          tokens: { fontSize: 12, iconSize: 16, textLineHeight: 2.25 }
         }
       ],
       tokens: {
         color: '#016b6a',
-        height: 40,
+        fontSize: 16,
         iconDisplace: 0,
         iconSize: 18,
         iconSpace: 1,
@@ -1231,6 +1245,75 @@ module.exports = {
         textLineHeight: 2.13
       }
     },
+    Countdown: {
+      appearances: {
+        feature: { type: 'variant', values: [ true ] },
+        inverse: { type: 'variant', values: [ true ] },
+        label: { type: 'variant', values: [ true ] },
+        large: { type: 'variant', values: [ true ] },
+        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' ] },
+          tokens: {
+            containerPaddingBottomTop: 16,
+            containerPaddingLeftRight: 24,
+            labelFontSize: 14,
+            labelLineHeight: 1.42857142857,
+            textLineHeight: 1.14285714286
+          }
+        },
+        {
+          if: { large: true, viewport: [ 'xs' ] },
+          tokens: { textFontSize: 28 }
+        },
+        {
+          if: { feature: true, viewport: [ 'xs' ] },
+          tokens: { textFontSize: 28 }
+        },
+        {
+          if: { feature: true },
+          tokens: {
+            labelBorderColor: null,
+            textFontSize: 64,
+            textLineHeight: 1.14285714286,
+            textTimerFontName: 'StagSans',
+            textTimerFontWeight: '300'
+          }
+        },
+        {
+          if: { large: true },
+          tokens: {
+            textFontSize: 64,
+            textLineHeight: 1.14285714286,
+            textTimerFontName: 'StagSans',
+            textTimerFontWeight: '300'
+          }
+        },
+        { if: { inverse: true }, tokens: { labelBorderColor: null } }
+      ],
+      tokens: {
+        containerBorderRadius: 6,
+        containerGradient: null,
+        containerInverseBorder: 2,
+        containerInverseBorderColor: '#ffffff',
+        containerPaddingBottomTop: 48,
+        containerPaddingLeftRight: 64,
+        inverseBorderColor: null,
+        labelBorderColor: null,
+        labelFontSize: 16,
+        labelLineHeight: 1.5,
+        textFontSize: 16,
+        textLineHeight: 1.14285714286,
+        textTimerFontName: 'StagSans',
+        textTimerFontWeight: '400'
+      }
+    },
     DatePicker: {
       appearances: {},
       rules: [],
@@ -1625,6 +1708,39 @@ module.exports = {
         size: { type: 'variant', values: [ 'small', 'large' ] }
       },
       rules: [
+        { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
+        {
+          if: { action: 'subtract' },
+          tokens: { icon: PaletteIconSubtract }
+        },
+        {
+          if: { action: 'close' },
+          tokens: { icon: PaletteIconClose }
+        },
+        {
+          if: { action: 'expand' },
+          tokens: { icon: PaletteIconExpand }
+        },
+        {
+          if: { action: 'moveDown' },
+          tokens: { icon: PaletteIconChevronDown }
+        },
+        {
+          if: { action: 'moveLeft' },
+          tokens: { icon: PaletteIconChevronLeft }
+        },
+        {
+          if: { action: 'moveRight' },
+          tokens: { icon: PaletteIconChevronRight }
+        },
+        {
+          if: { action: 'moveUp' },
+          tokens: { icon: PaletteIconChevronUp }
+        },
+        {
+          if: { action: 'play' },
+          tokens: { icon: PaletteIconPlayVideo }
+        },
         { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
         {
           if: { action: 'subtract' },
@@ -1998,6 +2114,7 @@ module.exports = {
         {
           if: { size: 'large' },
           tokens: {
+            iconMarginTop: 2,
             itemFontSize: 20,
             itemIconSize: 20,
             itemLineHeight: 1.4,
@@ -2006,7 +2123,12 @@ module.exports = {
         },
         {
           if: { size: 'small' },
-          tokens: { itemFontSize: 14, itemIconSize: 14, listGutter: 10 }
+          tokens: {
+            iconMarginTop: 1,
+            itemFontSize: 14,
+            itemIconSize: 14,
+            listGutter: 10
+          }
         },
         { if: { compact: true }, tokens: { itemLineHeight: 1.2 } },
         {
@@ -2021,7 +2143,7 @@ module.exports = {
       tokens: {
         dividerColor: '#c9c8c8',
         dividerSize: 1,
-        iconMarginTop: 4,
+        iconMarginTop: 2,
         interItemMargin: 8,
         interItemMarginWithDivider: 16,
         itemBulletColor: '#7c1366',
@@ -2031,7 +2153,7 @@ module.exports = {
         itemBulletWidth: 4,
         itemFontName: 'StagSans',
         itemFontSize: 16,
-        itemFontWeight: '600',
+        itemFontWeight: '400',
         itemIconColor: '#7c1366',
         itemIconSize: 16,
         itemLineHeight: 1.3,
@@ -2310,7 +2432,6 @@ module.exports = {
           if: { size: 'large' },
           tokens: { itemFontSize: 20, itemLineHeight: 1.4 }
         },
-        { if: { size: 'medium' }, tokens: {} },
         {
           if: { size: 'small' },
           tokens: { itemFontSize: 14, itemLineHeight: 1.42857142857 }
@@ -2632,6 +2753,23 @@ module.exports = {
         outlineWidth: 1
       }
     },
+    QuantitySelector: {
+      appearances: { alternative: { type: 'variant', values: [ true ] } },
+      rules: [ { if: { alternative: true }, tokens: { padding: 0 } } ],
+      tokens: {
+        backgroundColor: null,
+        borderColor: null,
+        iconColor: null,
+        iconSize: 16,
+        inputBackgroundColor: null,
+        inputBorderColor: null,
+        inputBorderWidth: 1,
+        leftIcon: PaletteIconSubtract,
+        padding: 16,
+        rightIcon: PaletteIconAdd,
+        textColor: null
+      }
+    },
     QuickLinks: {
       appearances: {
         viewport: {
@@ -3511,6 +3649,55 @@ module.exports = {
         thickness: 4
       }
     },
+    SplashButton: {
+      appearances: {
+        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 ]
+        }
+      },
+      rules: [],
+      tokens: {
+        buttonContentBackground: null,
+        buttonContentChildrenBackground: null,
+        playIcon: PaletteIconPlayVideo,
+        playIconColor: '#ffffff'
+      }
+    },
+    SplashButtonWithDetails: {
+      appearances: {
+        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 ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: { buttonContentChildrenBackground: null }
+        }
+      ],
+      tokens: {
+        buttonBackground: '#ffffff',
+        buttonBorderColor: null,
+        buttonBottomPosition: 24,
+        buttonContentBackground: null,
+        buttonContentChildrenBackground: null,
+        buttonLeftPosition: 24,
+        buttonMinHeight: 64,
+        buttonPaddingLeft: 16,
+        buttonPaddingRight: 16,
+        buttonRadius: 32,
+        detailsContainerPadding: 8,
+        playIcon: PaletteIconPlayVideo,
+        playIconColor: '#ffffff',
+        playIconContainerBackground: null
+      }
+    },
     StackView: {
       appearances: {},
       rules: [],
@@ -3602,6 +3789,69 @@ module.exports = {
         showStepTrackerLabel: true
       }
     },
+    StoryCard: {
+      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 ]
+        },
+        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 ]
+        },
+        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 ]
+        }
+      },
+      rules: [
+        { if: { hover: true }, tokens: { borderWidth: 2 } },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#e6e6e6' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#efefef',
+        borderRadius: 6,
+        borderWidth: 1,
+        contentAlignItems: 'stretch',
+        contentFlexGrow: 0,
+        contentFlexShrink: 0,
+        contentJustifyContent: 'flex-start',
+        flex: 1,
+        minWidth: 0,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        shadow: {
+          blur: 0,
+          color: 'rgba(0, 0, 0, 0)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 0,
+          spread: 0
+        }
+      }
+    },
     Table: {
       appearances: { spacing: { type: 'variant', values: [ 'compact' ] } },
       rules: [
@@ -3898,6 +4148,74 @@ module.exports = {
         width: null
       }
     },
+    TermsAndConditions: {
+      appearances: {
+        expanded: {
+          description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { expanded: true },
+          tokens: { icon: PaletteIconChevronUp }
+        }
+      ],
+      tokens: {
+        contentPaddingBottom: 8,
+        contentPaddingLeft: 16,
+        expandBaseBorderWidth: 0,
+        expandContentPaddingBottom: 16,
+        expandContentPaddingLeft: 16,
+        expandContentPaddingRight: 16,
+        expandContentPaddingTop: 16,
+        expandIconContainerAlignItems: 'center',
+        expandIconContainerBorder: 1,
+        expandIconContainerBorderColor: '#efefef',
+        expandIconContainerHeight: 32,
+        expandIconContainerJustifyContent: 'center',
+        expandIconContainerMarginX: 0,
+        expandIconContainerMarginY: 12,
+        expandIconContainerWidth: 32,
+        expandTitleColor: '#efefef',
+        expandTitleFontSize: 16,
+        expandTitleLineHeight: 1.5,
+        expandTitleMarginX: 4,
+        expandTitleMarginY: 0,
+        icon: PaletteIconChevronDown,
+        listColor: '#016b6a',
+        listFontName: 'StagSans',
+        listFontSize: 14,
+        listFontWeight: '400',
+        listLineHeight: 1.42857142857,
+        listMarginBottom: 16,
+        listMarginLeft: 32,
+        mdContentPaddingBottom: 16,
+        mdContentPaddingLeft: 48,
+        orderedPadding: 0,
+        titleColor: '#016b6a',
+        titleFontSize: 14,
+        titleLineHeight: 1.42857142857,
+        titlePaddingLeft: 8,
+        unorderedPadding: 0
+      }
+    },
+    Testimonial: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        dividerBackgroundColor: '#ffffff',
+        dividerBorder: 1,
+        figcaptionGap: 12,
+        icon: PaletteIconArrowLeft,
+        iconColor: '#ffffff',
+        imageSize: 48,
+        quoteContainerGap: 4,
+        testimonialContainerGap: 12,
+        textColor: '#ffffff'
+      }
+    },
     TextArea: {
       appearances: {},
       rules: [],
@@ -4051,8 +4369,6 @@ module.exports = {
         animationColorBefore: '#ffffff',
         animationDivColorAfter: '#ffffff',
         animationDivColorBefore: '#ffffff',
-        animationFillColorAfter: '#ffffff',
-        animationFillColorBefore: '#ffffff',
         animationHeightAfter: 24,
         animationHeightBefore: 0,
         animationPaddingBottomAfter: 16,
@@ -4423,6 +4739,91 @@ module.exports = {
         textTransform: 'none'
       }
     },
+    Video: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        borderColor: '#000000',
+        pauseIcon: PaletteIconAdd,
+        playIcon: PaletteIconAdd,
+        replayIcon: PaletteIconAdd
+      }
+    },
+    VideoButton: { appearances: {}, rules: [], tokens: { color: '#ffffff' } },
+    VideoControlBar: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        captionsIcon: PaletteIconAdd,
+        maximizeIcon: PaletteIconAdd,
+        menuBottom: 64,
+        menuMarginLeft: 16,
+        menuRight: 32,
+        minimizeIcon: PaletteIconAdd,
+        paddingBottom: 16,
+        paddingLeft: 48,
+        paddingLeftCompactMode: 16,
+        paddingRight: 48,
+        paddingRightCompactMode: 16,
+        paddingTop: 16,
+        settingsIcon: PaletteIconSettings
+      }
+    },
+    VideoMenu: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        background: '#000000',
+        checkMarkFocusColor: '#016b6a',
+        checkMarkHeight: 24,
+        checkMarkHoverColor: '#016b6a',
+        checkMarkIcon: PaletteIconCheck,
+        checkMarkSelectedColor: '#000000',
+        checkMarkUnselectedColor: 'rgba(0, 0, 0, 0)',
+        checkMarkWidth: 24,
+        padding: 16
+      }
+    },
+    VideoMiddleControlButton: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        background: '#000000',
+        height: 64,
+        iconColor: '#ffffff',
+        width: 64
+      }
+    },
+    VideoProgressBar: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        rangeBackground: 'rgba(0, 0, 0, 0)',
+        thumbBackground: '#ffffff',
+        thumbHeight: 8,
+        thumbWidth: 8,
+        timestampMarginLeft: 8,
+        timestampMarginRight: 8,
+        trackGradientEnd: '#016b6a',
+        trackGradientStart: '#016b6a'
+      }
+    },
+    VideoVolumeSlider: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        marginLeft: 16,
+        marginRight: 16,
+        mutedIcon: PaletteIconAdd,
+        rangeBackground: 'rgba(0, 0, 0, 0)',
+        thumbBackground: '#ffffff',
+        thumbHeight: 8,
+        thumbWidth: 8,
+        trackGradientEnd: '#ffffff',
+        trackGradientStart: '#ffffff',
+        unmutedIcon: PaletteIconAdd
+      }
+    },
     WaffleGrid: {
       appearances: {},
       rules: [],
@@ -4492,5 +4893,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.22.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.24.0' }
 }

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^0.13.0",
-    "@telus-uds/system-theme-tokens": "^2.22.0"
+    "@telus-uds/palette-koodo": "^0.14.0",
+    "@telus-uds/system-theme-tokens": "^2.24.0"
   },
   "files": [
     "build",
@@ -20,7 +20,7 @@
   "main": "build/rn/theme.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^0.13.0"
+    "@telus-uds/palette-koodo": "^0.14.0"
   },
   "repository": {
     "type": "git",
@@ -31,5 +31,5 @@
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
     "dev": "nodemon -w src -x 'npm run build'"
   },
-  "version": "3.23.0"
+  "version": "3.25.0"
 }