@telus-uds/theme-koodo 3.30.0 → 4.0.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Sat, 27 May 2023 00:36:19 GMT
+ * Generated on Fri, 02 Jun 2023 00:26:16 GMT
  *
  */
 
@@ -145,74 +145,83 @@ module.exports = {
       rules: [
         {
           if: { background: 'lightest' },
-          tokens: { backgroundColor: '#ffffff' }
+          tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
         },
         {
           if: { background: 'lighter' },
-          tokens: { backgroundColor: '#fafafa' }
+          tokens: { backgroundColor: '#fafafa', borderColor: '#fafafa' }
         },
         {
           if: { background: 'light' },
-          tokens: { backgroundColor: '#efefef' }
+          tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
         },
         {
           if: { background: 'dark' },
-          tokens: { backgroundColor: '#666666' }
+          tokens: { backgroundColor: '#666666', borderColor: '#666666' }
         },
         {
           if: { background: 'darker' },
-          tokens: { backgroundColor: '#595959' }
+          tokens: { backgroundColor: '#595959', borderColor: '#595959' }
         },
         {
           if: { background: 'darkest' },
-          tokens: { backgroundColor: '#000000' }
+          tokens: { backgroundColor: '#000000', borderColor: '#000000' }
         },
         {
           if: { background: 'critical' },
-          tokens: { backgroundColor: '#b8373e' }
+          tokens: { backgroundColor: '#b8373e', borderColor: '#b8373e' }
         },
         {
           if: { background: 'danger' },
-          tokens: { backgroundColor: '#f8dde3' }
+          tokens: { backgroundColor: '#f8dde3', borderColor: '#f8dde3' }
         },
         {
           if: { background: 'warning' },
-          tokens: { backgroundColor: '#feeec7' }
+          tokens: { backgroundColor: '#feeec7', borderColor: '#feeec7' }
         },
         {
           if: { background: 'positive' },
-          tokens: { backgroundColor: '#e5f7fb' }
+          tokens: { backgroundColor: '#e5f7fb', borderColor: '#e5f7fb' }
         },
         {
           if: { background: 'brand' },
-          tokens: { backgroundColor: '#016b6a' }
+          tokens: { backgroundColor: '#016b6a', borderColor: '#016b6a' }
         },
         {
           if: { background: 'white' },
-          tokens: { backgroundColor: '#ffffff' }
+          tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
         },
         {
           if: { background: 'black' },
-          tokens: { backgroundColor: '#000000' }
+          tokens: { backgroundColor: '#000000', borderColor: '#000000' }
         },
         {
           if: { background: 'featurePrimary' },
-          tokens: { backgroundColor: '#7c1366' }
+          tokens: { backgroundColor: '#7c1366', borderColor: '#7c1366' }
         },
         {
           if: { background: 'featureSecondary' },
-          tokens: { backgroundColor: '#17367d' }
+          tokens: { backgroundColor: '#17367d', borderColor: '#17367d' }
         },
         {
           if: { background: 'featureNeutral' },
-          tokens: { backgroundColor: '#595959' }
+          tokens: { backgroundColor: '#595959', borderColor: '#595959' }
         },
         {
           if: { background: 'featureBrand' },
-          tokens: { backgroundColor: '#016b6a' }
+          tokens: { backgroundColor: '#016b6a', borderColor: '#016b6a' }
         }
       ],
-      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', gradient: null }
+      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
+      }
     },
     Breadcrumbs: {
       appearances: { inverse: { type: 'variant', values: [ true ] } },
@@ -672,8 +681,8 @@ module.exports = {
         {
           if: { pressed: true },
           tokens: {
-            backgroundColor: '#016b6a',
-            borderColor: '#016b6a',
+            backgroundColor: '#1b4746',
+            borderColor: '#1b4746',
             color: '#ffffff'
           }
         },
@@ -683,21 +692,13 @@ module.exports = {
         },
         {
           if: { hover: true },
-          tokens: { backgroundColor: '#1b4746', iconColor: '#1b4746' }
-        },
-        {
-          if: { selected: true },
           tokens: {
-            opacity: 0.8,
-            outerBorderColor: '#016b6a',
-            outerBorderGap: 1,
-            outerBorderWidth: 4
+            backgroundColor: '#1b4746',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#ffffff',
+            iconColor: '#ffffff'
           }
         },
-        {
-          if: { focus: true, pressed: true },
-          tokens: { outerBorderColor: '#016b6a' }
-        },
         {
           if: { inactive: true },
           tokens: {
@@ -710,37 +711,68 @@ module.exports = {
         {
           if: { selected: true },
           tokens: {
-            opacity: 0.8,
-            outerBorderColor: '#016b6a',
-            outerBorderGap: 1,
-            outerBorderWidth: 4
+            backgroundColor: '#016b6a',
+            color: '#ffffff',
+            iconColor: '#ffffff',
+            outerBorderColor: 'transparent'
+          }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: {
+            backgroundColor: '#1b4746',
+            outerBorderColor: 'rgba(0, 0, 0, 0)'
           }
         },
         {
           if: { focus: true, selected: true },
-          tokens: { outerBorderColor: '#1b4746' }
+          tokens: {
+            backgroundColor: '#016b6a',
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 2,
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { hover: true, pressed: true, selected: true },
+          tokens: {
+            backgroundColor: '#1b4746',
+            borderColor: 'rgba(0, 0, 0, 0)'
+          }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { backgroundColor: '#1b4746', outerBorderColor: '#1b4746' }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            color: '#c9c8c8',
+            iconColor: '#c9c8c8'
+          }
         }
       ],
       tokens: {
         alignSelf: 'flex-start',
-        backgroundColor: '#016b6a',
-        borderColor: '#1b4746',
+        backgroundColor: '#ffffff',
+        borderColor: '#016b6a',
         borderRadius: 4,
-        borderWidth: 0,
-        color: '#ffffff',
+        borderWidth: 1,
+        color: '#016b6a',
         dividerColor: '#016b6a',
         fontName: 'StagSans',
         fontSize: 14,
         fontWeight: '600',
         icon: PaletteIconChevronDown,
         iconAlignSelf: 'center',
-        iconBackground: '#ffffff',
+        iconBackground: 'rgba(0, 0, 0, 0)',
         iconBorderRadius: 32,
         iconColor: '#016b6a',
         iconPadding: 4,
         iconPosition: 'right',
         iconSize: 20,
-        iconSpace: 3,
+        iconSpace: 0,
         iconTranslateX: 0,
         iconTranslateY: 0,
         lineHeight: 1.5,
@@ -749,7 +781,7 @@ module.exports = {
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderGap: 2,
-        outerBorderWidth: 2,
+        outerBorderWidth: 1,
         paddingBottom: 8,
         paddingLeft: 24,
         paddingRight: 16,
@@ -935,9 +967,9 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: null,
-        borderRadius: 0,
-        borderWidth: 0,
+        borderColor: '#c9c8c8',
+        borderRadius: 8,
+        borderWidth: 1,
         contentAlignItems: 'stretch',
         contentFlexGrow: 0,
         contentFlexShrink: 1,
@@ -1238,15 +1270,15 @@ module.exports = {
         },
         {
           if: { size: 'large' },
-          tokens: { fontSize: 20, iconSize: 24, textLineHeight: 2.15 }
+          tokens: { fontSize: 20, iconSize: 24 }
         },
         {
           if: { size: 'small' },
-          tokens: { fontSize: 14, iconSize: 16, textLineHeight: 2.15 }
+          tokens: { fontSize: 14, iconSize: 16 }
         },
         {
           if: { size: 'micro' },
-          tokens: { fontSize: 12, iconSize: 16, textLineHeight: 2.25 }
+          tokens: { fontSize: 12, iconSize: 16 }
         }
       ],
       tokens: {
@@ -1258,8 +1290,7 @@ module.exports = {
         leftIcon: PaletteIconChevronLeft,
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         rightIcon: PaletteIconChevronRight,
-        textLine: 'none',
-        textLineHeight: 2.13
+        textLine: 'none'
       }
     },
     Countdown: {
@@ -1479,7 +1510,42 @@ module.exports = {
           tokens: { icon: PaletteIconChevronUp }
         }
       ],
-      tokens: { icon: PaletteIconChevronDown, size: 4 }
+      tokens: {
+        backgroundColor: null,
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        icon: PaletteIconChevronDown,
+        iconColor: '#000000',
+        iconGap: 8,
+        iconPaddingTop: 4,
+        iconPosition: 'left',
+        iconSize: 16,
+        justifyContent: 'flex-start',
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        size: 4,
+        verticalAlign: 'middle'
+      }
+    },
+    ExpandCollapseMiniPanel: {
+      appearances: { compact: { type: 'variant', values: [ true ] } },
+      rules: [ { if: { compact: true }, tokens: {} } ],
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 0,
+        borderWidth: 0,
+        collapseDuration: 250,
+        contentPaddingBottom: 16,
+        contentPaddingLeft: 0,
+        contentPaddingRight: 0,
+        contentPaddingTop: 0,
+        expandDividerColor: 'rgba(0, 0, 0, 0)',
+        expandDividerWidth: 0,
+        expandDuration: 300,
+        marginBottom: 0
+      }
     },
     ExpandCollapsePanel: {
       appearances: { compact: { type: 'variant', values: [ true ] } },
@@ -1493,9 +1559,9 @@ module.exports = {
         contentPaddingLeft: 16,
         contentPaddingRight: 16,
         contentPaddingTop: 16,
-        expandDividerColor: 'rgba(0, 0, 0, 0)',
+        expandDividerColor: null,
+        expandDividerWidth: null,
         expandDuration: 300,
-        expanddDividerWidth: 0,
         marginBottom: 8
       }
     },
@@ -2123,7 +2189,7 @@ module.exports = {
             blockFontName: 'StagSans',
             blockFontSize: 12,
             blockFontWeight: '600',
-            blockLineHeight: 1.33333333333,
+            blockLineHeight: 1.6,
             iconSize: 16
           }
         },
@@ -2145,7 +2211,7 @@ module.exports = {
         blockFontName: 'StagSans',
         blockFontSize: 16,
         blockFontWeight: '600',
-        blockLineHeight: 1.5,
+        blockLineHeight: 1.3,
         borderRadius: 4,
         color: '#016b6a',
         icon: null,
@@ -3425,28 +3491,44 @@ module.exports = {
         {
           if: { hover: true },
           tokens: {
+            borderColor: '#666666',
             outerBorderColor: '#efefef',
             outerBorderWidth: 2,
-            radioInputBorderColor: '#1b4746'
+            radioOuterBorderColor: '#17367d',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
           }
         },
         {
-          description: 'Pressed state matches hover state plus light grey background',
-          if: { pressed: true },
+          if: { focus: true },
           tokens: {
-            backgroundColor: '#efefef',
-            outerBorderColor: '#efefef',
+            outerBorderColor: '#17367d',
+            outerBorderGap: 2,
             outerBorderWidth: 2,
-            radioInputBorderColor: '#1b4746'
+            radioInputBorderColor: '#016b6a',
+            radioOuterBorderColor: '#17367d',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
           }
         },
         {
-          if: { focus: true },
+          if: { checked: true },
           tokens: {
-            outerBorderColor: '#666666',
-            outerBorderGap: 4,
-            outerBorderWidth: 2,
-            radioInputBorderColor: '#1b4746'
+            borderColor: '#c9c8c8',
+            radioInputBorderColor: '#016b6a',
+            radioInputBorderWidth: 2
+          }
+        },
+        {
+          description: 'Pressed state matches hover state plus light grey background',
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            outerBorderColor: '#c9c8c8',
+            outerBorderGap: 0,
+            outerBorderWidth: 1,
+            radioOuterBorderColor: '#17367d',
+            radioOuterBorderGap: 2
           }
         },
         {
@@ -3455,8 +3537,13 @@ module.exports = {
             backgroundColor: '#efefef',
             borderColor: 'transparent',
             color: '#666666',
-            radioInputBackgroundColor: '#efefef',
-            radioInputBorderColor: '#c9c8c8'
+            radioCheckedBackgroundColor: '#c9c8c8',
+            radioInputBackgroundColor: '#c9c8c8',
+            radioInputBorderColor: '#c9c8c8',
+            radioInputSize: 16,
+            radioOuterBorderColor: '#c9c8c8',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
           }
         },
         {
@@ -3470,7 +3557,7 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#000000',
+        borderColor: '#c9c8c8',
         borderRadius: 4,
         borderWidth: 1,
         color: '#000000',
@@ -3485,22 +3572,22 @@ module.exports = {
         fontWeight: '700',
         letterSpacing: 0,
         lineHeight: 1.4,
-        minWidth: 120,
+        minWidth: 288,
         outerBorderColor: 'transparent',
         outerBorderGap: 0,
         outerBorderWidth: 0,
         paddingBottom: 16,
-        paddingLeft: 10,
+        paddingLeft: 8,
         paddingRight: 16,
-        paddingTop: 16,
+        paddingTop: 12,
         radioCheckedBackgroundColor: '#016b6a',
-        radioCheckedSize: 12,
+        radioCheckedSize: 16,
         radioInputBackgroundColor: '#ffffff',
         radioInputBorderColor: '#016b6a',
         radioInputBorderWidth: 2,
         radioInputOutlineColor: 'rgba(0, 0, 0, 0)',
         radioInputOutlineWidth: 0,
-        radioInputSize: 20,
+        radioInputSize: 24,
         radioOuterBorderColor: 'transparent',
         radioOuterBorderGap: 0,
         radioOuterBorderWidth: 0,
@@ -3511,6 +3598,11 @@ module.exports = {
     },
     RadioCardGroup: {
       appearances: {
+        fullWidth: {
+          description: 'Makes cards always occupy the full width of the parent, regardless of viewport',
+          type: 'variant',
+          values: [ true ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -3519,11 +3611,11 @@ module.exports = {
       },
       rules: [
         {
-          if: { viewport: [ 'lg', 'xl' ] },
-          tokens: { direction: 'column' }
+          if: { fullWidth: null, viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: { direction: 'row', space: 5 }
         }
       ],
-      tokens: { direction: 'row', fieldSpace: 2, space: 2 }
+      tokens: { direction: 'column', fieldSpace: 3, space: 3 }
     },
     RadioGroup: {
       appearances: {},
@@ -3610,28 +3702,30 @@ module.exports = {
       rules: [
         {
           if: { hover: true, inactive: null },
-          tokens: {
-            outerBackgroundColor: '#efefef',
-            outerBorderColor: '#efefef'
-          }
+          tokens: { backgroundColor: '#e6e6e6' }
         },
         {
-          if: { focus: true, inactive: null },
-          tokens: { borderColor: '#016b6a', borderWidth: 2 }
+          if: { focus: true },
+          tokens: { borderColor: '#016b6a', borderWidth: 3 }
         },
         {
           if: { inactive: true },
-          tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
+          tokens: {
+            backgroundColor: '#efefef',
+            borderColor: '#efefef',
+            color: '#666666',
+            placeholderColor: '#666666'
+          }
         }
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#c9c8c8',
-        borderRadius: 32,
+        borderColor: '#000000',
+        borderRadius: 4,
         borderWidth: 1,
-        buttonsGap: 1,
+        buttonsGap: 2,
         clearButtonIcon: PaletteIconTimes,
-        color: '#666666',
+        color: '#000000',
         fontName: 'StagSans',
         fontSize: 16,
         fontWeight: '400',
@@ -3639,12 +3733,12 @@ module.exports = {
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderRadius: 32,
-        outerBorderWidth: 2,
-        paddingBottom: 10,
-        paddingLeft: 24,
-        paddingRight: 4,
-        paddingTop: 10,
-        placeholderColor: '#666666',
+        outerBorderWidth: 0,
+        paddingBottom: 12,
+        paddingLeft: 16,
+        paddingRight: 6,
+        paddingTop: 12,
+        placeholderColor: '#000000',
         submitButtonIcon: PaletteIconSpyglass
       }
     },
@@ -3680,7 +3774,15 @@ module.exports = {
           tokens: { backgroundColor: '#016b6a', iconColor: '#ffffff' }
         },
         {
-          if: { hover: true },
+          if: { hover: true, priority: null },
+          tokens: {
+            backgroundColor: '#016b6a',
+            borderColor: '#016b6a',
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { hover: true, priority: 'high' },
           tokens: {
             backgroundColor: '#1b4746',
             borderColor: '#1b4746',
@@ -3690,29 +3792,48 @@ module.exports = {
         {
           if: { focus: true },
           tokens: {
-            backgroundColor: 'transparent',
+            backgroundColor: '#ffffff',
             borderColor: '#016b6a',
-            borderWidth: 2,
+            borderWidth: 3,
             iconColor: '#016b6a'
           }
         },
         {
           if: { pressed: true },
           tokens: {
-            backgroundColor: '#016b6a',
+            backgroundColor: '#1b4746',
             borderColor: null,
             borderWidth: 0,
             iconColor: '#ffffff'
           }
         },
-        { if: { inactive: true }, tokens: { opacity: 0.3 } }
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            backgroundColor: '#1b4746',
+            borderColor: null,
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { inactive: true, priority: 'high' },
+          tokens: { backgroundColor: '#efefef', iconColor: '#c9c8c8' }
+        },
+        {
+          if: { inactive: true, priority: null },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            iconColor: 'rgba(0, 0, 0, 0)'
+          }
+        }
       ],
       tokens: {
         backgroundColor: null,
         borderColor: null,
         borderRadius: 32,
         borderWidth: 0,
-        iconColor: '#666666',
+        iconColor: '#016b6a',
         iconSize: 20,
         opacity: 1,
         paddingBottom: 8,
@@ -4941,7 +5062,18 @@ module.exports = {
     },
     Typography: {
       appearances: {
-        colour: { type: 'variant', values: [ 'red' ] },
+        colour: {
+          type: 'variant',
+          values: [
+            'default',      'brand',
+            'dark',         'light',
+            'positive',     'warning',
+            'danger',       'black',
+            'white',        'brand2',
+            'brand3',       'alternative1',
+            'alternative2', 'alternative3'
+          ]
+        },
         compact: {
           description: 'Reduces line height on some body text styles. For data-rich content, not for flow content',
           type: 'variant',
@@ -5101,7 +5233,29 @@ module.exports = {
           }
         },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
-        { if: { colour: 'red' }, tokens: { color: '#df3d0c' } }
+        { if: { colour: 'default' }, tokens: { color: '#000000' } },
+        { if: { colour: 'brand' }, tokens: { color: '#016b6a' } },
+        { if: { colour: 'dark' }, tokens: { color: '#595959' } },
+        { if: { colour: 'light' }, tokens: { color: '#666666' } },
+        { if: { colour: 'positive' }, tokens: { color: '#016b6a' } },
+        { if: { colour: 'warning' }, tokens: { color: '#df3d0c' } },
+        { if: { colour: 'danger' }, tokens: { color: '#b8373e' } },
+        { if: { colour: 'black' }, tokens: { color: '#000000' } },
+        { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
+        { if: { colour: 'brand2' }, tokens: { color: '#17367d' } },
+        { if: { colour: 'brand3' }, tokens: { color: '#7c1366' } },
+        {
+          if: { colour: 'alternative1' },
+          tokens: { color: '#c53a70' }
+        },
+        {
+          if: { colour: 'alternative2' },
+          tokens: { color: '#8c0448' }
+        },
+        {
+          if: { colour: 'alternative3' },
+          tokens: { color: '#258b0b' }
+        }
       ],
       tokens: {
         color: '#000000',
@@ -5306,5 +5460,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.28.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.29.0' }
 }

package/package.json

@@ -6,7 +6,7 @@
   "description": "Koodo theme",
   "devDependencies": {
     "@telus-uds/palette-koodo": "^0.17.0",
-    "@telus-uds/system-theme-tokens": "^2.28.0"
+    "@telus-uds/system-theme-tokens": "^2.29.0"
   },
   "files": [
     "build",
@@ -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.30.0"
+  "version": "4.0.0"
 }