@telus-uds/theme-koodo 4.2.0 → 4.3.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 09 Jun 2023 00:16:22 GMT
+ * Generated on Wed, 14 Jun 2023 00:00:11 GMT
  *
  */
 
@@ -944,6 +944,12 @@ module.exports = {
           description: 'Defines background related attributes of Card',
           type: 'variant',
           values: [ 'alternative', 'subtle', 'grid', 'feature' ]
+        },
+        padding: { type: 'variant', values: [ 'custom' ] },
+        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: [
@@ -962,6 +968,24 @@ module.exports = {
         {
           if: { background: 'feature' },
           tokens: { backgroundColor: '#f9f6a5' }
+        },
+        {
+          if: { viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: {
+            paddingBottom: 48,
+            paddingLeft: 32,
+            paddingRight: 32,
+            paddingTop: 48
+          }
+        },
+        {
+          if: { padding: 'custom' },
+          tokens: {
+            paddingBottom: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingTop: 0
+          }
         }
       ],
       tokens: {
@@ -975,10 +999,10 @@ module.exports = {
         contentJustifyContent: 'flex-start',
         flex: 1,
         minWidth: null,
-        paddingBottom: 16,
-        paddingLeft: 16,
-        paddingRight: 16,
-        paddingTop: 16,
+        paddingBottom: 32,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 32,
         shadow: null
       }
     },
@@ -1233,7 +1257,7 @@ module.exports = {
           if: { focus: true, pressed: true },
           tokens: { color: '#1b4746', outerBorderColor: '#1b4746' }
         },
-        { if: { alternative: true }, tokens: { color: '#666666' } },
+        { if: { alternative: true }, tokens: { color: '#000000' } },
         {
           if: { alternative: true, hover: true },
           tokens: { color: '#5c5c5c' }
@@ -1244,11 +1268,11 @@ module.exports = {
         },
         {
           if: { alternative: true, focus: true },
-          tokens: { color: '#666666', outerBorderColor: '#666666' }
+          tokens: { color: '#000000', outerBorderColor: '#000000' }
         },
         {
           if: { alternative: true, focus: true, pressed: true },
-          tokens: { color: '#5c5c5c', outerBorderColor: '#5c5c5c' }
+          tokens: { color: '#505050', outerBorderColor: '#505050' }
         },
         { if: { inverse: true }, tokens: { color: '#e5f7fb' } },
         {
@@ -1390,12 +1414,6 @@ module.exports = {
         calendarMonthCaptionFontWeight: '700',
         calendarMonthCaptionLineHeight: 1.2,
         calendarMonthCaptionPaddingBottom: 48,
-        dateInputBorderColor: 'rgba(0, 0, 0, 0)',
-        dateInputBorderRadius: 4,
-        dateInputFocusBorderColor: '#016b6a',
-        dateInputHoverBorderColor: '#c9c8c8',
-        dateInputInsideBorderColor: '#666666',
-        dateInputInsideColor: null,
         dateInputStrokeColor: '#666666',
         dayPickerNavigationButtonPadding: 12,
         dayPickerWeekHeaderColor: '#000000',
@@ -2171,14 +2189,10 @@ module.exports = {
           if: { pressed: true },
           tokens: { color: '#595959', textLine: 'none' }
         },
-        { if: { alternative: true }, tokens: { color: '#666666' } },
+        { if: { alternative: true }, tokens: { color: '#000000' } },
         {
           if: { alternative: true, focus: true },
-          tokens: { color: '#666666', outerBorderColor: '#666666' }
-        },
-        {
-          if: { alternative: true, focus: true, pressed: true },
-          tokens: { color: '#595959', outerBorderColor: '#595959' }
+          tokens: { color: '#000000', outerBorderColor: '#000000' }
         },
         {
           if: { alternative: true, hover: true },
@@ -2186,7 +2200,11 @@ module.exports = {
         },
         {
           if: { alternative: true, pressed: true },
-          tokens: { color: '#595959' }
+          tokens: { color: '#505050' }
+        },
+        {
+          if: { alternative: true, focus: true, pressed: true },
+          tokens: { color: '#505050', outerBorderColor: '#505050' }
         },
         { if: { inverse: true }, tokens: { color: '#e5f7fb' } },
         {
@@ -4307,8 +4325,8 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#efefef',
-        borderRadius: 6,
+        borderColor: '#c9c8c8',
+        borderRadius: 8,
         borderWidth: 1,
         contentAlignItems: 'stretch',
         contentFlexGrow: 0,
@@ -5128,10 +5146,11 @@ module.exports = {
           values: [
             'micro',    'small',
             'medium',   'large',
-            'h1',       'h2',
-            'h3',       'h4',
-            'h5',       'h6',
-            'display1', 'display2'
+            'eyebrow',  'h1',
+            'h2',       'h3',
+            'h4',       'h5',
+            'h6',       'display1',
+            'display2'
           ]
         },
         viewport: {
@@ -5158,6 +5177,17 @@ module.exports = {
           if: { size: 'large' },
           tokens: { fontSize: 20, lineHeight: 1.4 }
         },
+        {
+          if: { size: 'eyebrow' },
+          tokens: {
+            color: '#595959',
+            fontName: 'StagSans',
+            fontSize: 14,
+            fontWeight: '600',
+            lineHeight: 1.42857142857,
+            textTransform: 'uppercase'
+          }
+        },
         {
           if: { compact: true, size: 'large' },
           tokens: { lineHeight: 1.2 }
@@ -5499,5 +5529,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.31.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.32.0' }
 }

package/package.json

@@ -6,7 +6,7 @@
   "description": "Koodo theme",
   "devDependencies": {
     "@telus-uds/palette-koodo": "^0.18.0",
-    "@telus-uds/system-theme-tokens": "^2.31.0"
+    "@telus-uds/system-theme-tokens": "^2.32.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": "4.2.0"
+  "version": "4.3.0"
 }

package/theme.json

@@ -1294,7 +1294,12 @@
           "description": "Defines background related attributes of Card",
           "type": "variant",
           "values": ["alternative", "subtle", "grid", "feature"]
-        }
+        },
+        "padding": {
+          "type": "variant",
+          "values": ["custom"]
+        },
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
@@ -1331,6 +1336,28 @@
           "tokens": {
             "backgroundColor": "{palette.color.texas}"
           }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size48}",
+            "paddingLeft": "{palette.size.size32}",
+            "paddingRight": "{palette.size.size32}",
+            "paddingTop": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "padding": "custom"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size0}",
+            "paddingLeft": "{palette.size.size0}",
+            "paddingRight": "{palette.size.size0}",
+            "paddingTop": "{palette.size.size0}"
+          }
         }
       ],
       "tokens": {
@@ -1344,10 +1371,10 @@
         "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
         "flex": "{system.integer.1}",
         "minWidth": "{system.size.none}",
-        "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size32}",
+        "paddingLeft": "{palette.size.size24}",
+        "paddingRight": "{palette.size.size24}",
+        "paddingTop": "{palette.size.size32}",
         "shadow": "{system.shadow.none}"
       }
     },
@@ -1620,7 +1647,7 @@
             "alternative": true
           },
           "tokens": {
-            "color": "{palette.color.dove}"
+            "color": "{palette.color.black}"
           }
         },
         {
@@ -1647,8 +1674,8 @@
             "focus": true
           },
           "tokens": {
-            "color": "{palette.color.dove}",
-            "outerBorderColor": "{palette.color.dove}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}"
           }
         },
         {
@@ -1658,8 +1685,8 @@
             "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.doveDark}",
-            "outerBorderColor": "{palette.color.doveDark}"
+            "color": "{palette.color.mortarDark}",
+            "outerBorderColor": "{palette.color.mortarDark}"
           }
         },
         {
@@ -1878,12 +1905,6 @@
         "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight700}",
         "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio6to5}",
         "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
-        "dateInputBorderColor": "{palette.color.transparent}",
-        "dateInputBorderRadius": "{palette.radius.radius4}",
-        "dateInputFocusBorderColor": "{palette.color.mosque}",
-        "dateInputHoverBorderColor": "{palette.color.silver}",
-        "dateInputInsideBorderColor": "{palette.color.dove}",
-        "dateInputInsideColor": "{system.color.none}",
         "dateInputStrokeColor": "{palette.color.dove}",
         "dayPickerNavigationButtonPadding": "{palette.size.size12}",
         "dayPickerWeekHeaderColor": "{palette.color.black}",
@@ -3023,7 +3044,7 @@
             "alternative": true
           },
           "tokens": {
-            "color": "{palette.color.dove}"
+            "color": "{palette.color.black}"
           }
         },
         {
@@ -3032,37 +3053,37 @@
             "focus": true
           },
           "tokens": {
-            "color": "{palette.color.dove}",
-            "outerBorderColor": "{palette.color.dove}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}"
           }
         },
         {
           "if": {
             "alternative": true,
-            "focus": true,
-            "pressed": true
+            "hover": true
           },
           "tokens": {
-            "color": "{palette.color.mortar}",
-            "outerBorderColor": "{palette.color.mortar}"
+            "color": "{palette.color.doveDark}"
           }
         },
         {
           "if": {
             "alternative": true,
-            "hover": true
+            "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.doveDark}"
+            "color": "{palette.color.mortarDark}"
           }
         },
         {
           "if": {
             "alternative": true,
+            "focus": true,
             "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.mortar}"
+            "color": "{palette.color.mortarDark}",
+            "outerBorderColor": "{palette.color.mortarDark}"
           }
         },
         {
@@ -5356,8 +5377,8 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.gallery}",
-        "borderRadius": "{palette.radius.radius6}",
+        "borderColor": "{palette.color.silver}",
+        "borderRadius": "{palette.radius.radius8}",
         "borderWidth": "{palette.border.border1}",
         "contentAlignItems": "{system.flexAlign.stretch}",
         "contentFlexGrow": "{system.integer.0}",
@@ -6248,6 +6269,7 @@
             "small",
             "medium",
             "large",
+            "eyebrow",
             "h1",
             "h2",
             "h3",
@@ -6293,6 +6315,19 @@
             "lineHeight": "{palette.lineHeight.ratio7to5}"
           }
         },
+        {
+          "if": {
+            "size": "eyebrow"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio10to7}",
+            "textTransform": "{system.textTransform.uppercase}"
+          }
+        },
         {
           "if": {
             "compact": true,