@telus-uds/theme-koodo 1.0.0-prerelease.0 → 2.0.0

package/build/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 28 Feb 2022 15:49:16 GMT
+ * Generated on Tue, 05 Apr 2022 06:04:41 GMT
  *
  */
 
@@ -400,7 +400,8 @@ module.exports = {
         iconSize: 24,
         iconSpace: 0,
         leftIcon: PaletteIconChevronLeft,
-        rightIcon: PaletteIconChevronRight
+        rightIcon: PaletteIconChevronRight,
+        textLine: 'none'
       }
     },
     Divider: {
@@ -645,12 +646,12 @@ module.exports = {
       appearances: {},
       rules: [],
       tokens: {
-        color: '#666666',
+        color: '#000000',
         fontName: 'StagSans',
         fontSize: 16,
-        fontWeight: '500',
+        fontWeight: '700',
         gap: 8,
-        hintColor: '#666666',
+        hintColor: '#000000',
         hintFontName: 'StagSans',
         hintFontSize: 14,
         hintFontWeight: '400',
@@ -834,10 +835,6 @@ module.exports = {
         {
           if: { system: true },
           tokens: {
-            borderLeftWidth: 0,
-            borderRadius: 0,
-            borderRightWidth: 0,
-            borderTopWidth: 0,
             iconGap: 12,
             paddingBottom: 16,
             paddingLeft: 16,
@@ -849,7 +846,6 @@ module.exports = {
           if: { style: 'success' },
           tokens: {
             backgroundColor: '#c1f2e8',
-            borderColor: '#258b0b',
             icon: PaletteIconCheckCircledFilled,
             iconColor: '#258b0b'
           }
@@ -858,7 +854,6 @@ module.exports = {
           if: { style: 'warning' },
           tokens: {
             backgroundColor: '#feeec7',
-            borderColor: '#fbaf34',
             icon: PaletteIconExclamationTriangle,
             iconColor: '#fbaf34'
           }
@@ -866,8 +861,7 @@ module.exports = {
         {
           if: { style: 'error' },
           tokens: {
-            backgroundColor: '#fae6f4',
-            borderColor: '#df3d0c',
+            backgroundColor: '#f8dde3',
             icon: PaletteIconExclamationOctagon,
             iconColor: '#df3d0c'
           }
@@ -875,16 +869,16 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#efefef',
-        borderBottomWidth: 1,
-        borderColor: '#595959',
-        borderLeftWidth: 1,
-        borderRadius: 4,
-        borderRightWidth: 1,
-        borderTopWidth: 1,
-        color: '#666666',
+        borderBottomWidth: 0,
+        borderColor: 'transparent',
+        borderLeftWidth: 0,
+        borderRadius: 0,
+        borderRightWidth: 0,
+        borderTopWidth: 0,
+        color: '#000000',
         dismissButtonGap: 16,
         dismissIcon: PaletteIconTimes,
-        dismissIconColor: '#666666',
+        dismissIconColor: '#000000',
         dismissIconSize: 16,
         fontName: 'StagSans',
         fontSize: 16,
@@ -1234,7 +1228,6 @@ module.exports = {
         {
           if: { hover: true },
           tokens: {
-            borderColor: '#666666',
             outerBorderColor: '#efefef',
             outerBorderWidth: 2,
             radioInputBorderColor: '#014847'
@@ -1245,7 +1238,6 @@ module.exports = {
           if: { pressed: true },
           tokens: {
             backgroundColor: '#efefef',
-            borderColor: '#666666',
             outerBorderColor: '#efefef',
             outerBorderWidth: 2,
             radioInputBorderColor: '#014847'
@@ -1281,7 +1273,7 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#c9c8c8',
+        borderColor: '#000000',
         borderRadius: 4,
         borderWidth: 1,
         color: '#000000',
@@ -1525,7 +1517,7 @@ module.exports = {
         borderColor: '#c9c8c8',
         borderRadius: 4,
         borderWidth: 1,
-        color: '#666666',
+        color: '#000000',
         fontName: 'StagSans',
         fontSize: 16,
         fontWeight: '400',
@@ -1706,44 +1698,44 @@ module.exports = {
         }
       ],
       tokens: {
-        completedIcon: null,
-        completedIconColor: null,
-        completedIconSize: null,
-        connectorColor: '#000000',
-        connectorCompletedColor: '#7c1366',
-        connectorCompletedHeight: 3,
+        completedIcon: PaletteIconCheck,
+        completedIconColor: '#ffffff',
+        completedIconSize: 10,
+        connectorColor: '#016b6a',
+        connectorCompletedColor: '#016b6a',
+        connectorCompletedHeight: 1,
         connectorHeight: 1,
         connectorMinWidth: 16,
         containerPaddingBottom: null,
         containerPaddingLeft: null,
         containerPaddingRight: null,
         containerPaddingTop: null,
-        knobBackgroundColor: '#ffffff',
-        knobBorderColor: '#000000',
+        knobBackgroundColor: 'rgba(0, 0, 0, 0)',
+        knobBorderColor: '#016b6a',
         knobBorderWidth: 1,
-        knobCompletedBackgroundColor: '#7c1366',
-        knobCompletedBorderColor: '#7c1366',
+        knobCompletedBackgroundColor: '#016b6a',
+        knobCompletedBorderColor: '#016b6a',
         knobCompletedPaddingLeft: 2,
         knobCompletedPaddingTop: 2,
-        knobCurrentBackgroundColor: 'rgba(0, 0, 0, 0)',
-        knobCurrentBorderColor: '#7c1366',
-        knobCurrentBorderWidth: 2,
-        knobCurrentInnerColor: '#7c1366',
-        knobCurrentInnerSize: 8,
-        knobCurrentPaddingLeft: 2,
-        knobCurrentPaddingTop: 2,
-        knobSize: 16,
-        labelColor: '#000000',
-        labelCurrentColor: '#7c1366',
+        knobCurrentBackgroundColor: '#016b6a',
+        knobCurrentBorderColor: '#016b6a',
+        knobCurrentBorderWidth: 1,
+        knobCurrentInnerColor: null,
+        knobCurrentInnerSize: null,
+        knobCurrentPaddingLeft: null,
+        knobCurrentPaddingTop: null,
+        knobSize: 15,
+        labelColor: '#016b6a',
+        labelCurrentColor: '#016b6a',
         labelCurrentFontName: 'StagSans',
-        labelCurrentFontWeight: '600',
-        labelDirection: 'column',
+        labelCurrentFontWeight: '700',
+        labelDirection: 'row',
         labelFontName: 'StagSans',
-        labelFontSize: 14,
+        labelFontSize: 16,
         labelFontWeight: '400',
         labelGap: 4,
         labelLineHeight: 1.5,
-        labelMarginTop: 8,
+        labelMarginTop: 10,
         labelPaddingLeft: 16,
         labelPaddingRight: 16,
         showStepLabel: false,
@@ -2015,7 +2007,7 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#c9c8c8',
+        borderColor: '#000000',
         borderRadius: 4,
         borderWidth: 1,
         color: '#666666',
@@ -2104,6 +2096,12 @@ module.exports = {
         icon: null,
         iconColor: 'rgba(0, 0, 0, 0)',
         iconSize: 16,
+        labelColor: '#000000',
+        labelFontName: 'StagSans',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 8,
         opacity: 1,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -2126,6 +2124,18 @@ module.exports = {
         width: 64
       }
     },
+    ToggleSwitchGroup: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        alignItems: 'flex-start',
+        direction: 'column',
+        flexGrow: 0,
+        flexShrink: 0,
+        justifyContent: 'flex-start',
+        space: 3
+      }
+    },
     Tooltip: {
       appearances: {},
       rules: [],
@@ -2358,5 +2368,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '1.1.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '1.3.0' }
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@telus-uds/theme-koodo",
-  "version": "1.0.0-prerelease.0",
+  "version": "2.0.0",
   "description": "Koodo theme",
   "keywords": [
     "koodo"
   ],
   "author": "TELUS Digital",
-  "homepage": "https://github.com/telus/universal-design-system#readme",
+  "homepage": "https://github.com/telus/koodo-design-system#readme",
   "license": "UNLICENSED",
   "main": "build/theme.js",
   "files": [
@@ -15,23 +15,22 @@
   ],
   "dependencies": {},
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^0.1.0-prerelease.3"
+    "@telus-uds/palette-koodo": "^0.1.0"
   },
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^0.1.0-prerelease.3",
-    "@telus-uds/system-theme-tokens": "^1.1.0",
-    "@telus-uds/system-themes": "^0.0.1"
+    "@telus-uds/palette-koodo": "^0.1.0",
+    "@telus-uds/system-theme-tokens": "^1.3.0"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/telus/universal-design-system.git"
+    "url": "git+https://github.com/telus/koodo-design-system.git"
   },
   "scripts": {
     "release": "standard-version",
-    "build": "UDS_PALETTE=@telus-uds/palette-koodo system-themes-build",
+    "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
     "dev": "nodemon -w src -x 'yarn build'"
   },
   "bugs": {
-    "url": "https://github.com/telus/universal-design-system/issues"
+    "url": "https://github.com/telus/koodo-design-system/issues"
   }
 }

package/theme.json

@@ -438,7 +438,8 @@
         "iconSize": "{palette.size.size24}",
         "iconSpace": "{system.integer.0}",
         "leftIcon": "{palette.icon.ChevronLeft}",
-        "rightIcon": "{palette.icon.ChevronRight}"
+        "rightIcon": "{palette.icon.ChevronRight}",
+        "textLine": "{system.textLine.none}"
       }
     },
     "Divider": {
@@ -723,12 +724,12 @@
       "appearances": {},
       "rules": [],
       "tokens": {
-        "color": "{palette.color.dove}",
+        "color": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight500}",
+        "fontWeight": "{palette.fontWeight.weight700}",
         "gap": "{palette.size.size8}",
-        "hintColor": "{palette.color.dove}",
+        "hintColor": "{palette.color.black}",
         "hintFontName": "{palette.fontName.StagSans}",
         "hintFontSize": "{palette.fontSize.size14}",
         "hintFontWeight": "{palette.fontWeight.weight400}",
@@ -958,10 +959,6 @@
             "system": true
           },
           "tokens": {
-            "borderLeftWidth": "{system.border.zero}",
-            "borderRadius": "{system.radius.zero}",
-            "borderRightWidth": "{system.border.zero}",
-            "borderTopWidth": "{system.border.zero}",
             "iconGap": "{palette.size.size12}",
             "paddingBottom": "{palette.size.size16}",
             "paddingLeft": "{palette.size.size16}",
@@ -975,7 +972,6 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.mintTulip}",
-            "borderColor": "{palette.color.bilbao}",
             "icon": "{palette.icon.CheckCircledFilled}",
             "iconColor": "{palette.color.bilbao}"
           }
@@ -986,7 +982,6 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.beeswax}",
-            "borderColor": "{palette.color.seaBuckthorn}",
             "icon": "{palette.icon.ExclamationTriangle}",
             "iconColor": "{palette.color.seaBuckthorn}"
           }
@@ -996,8 +991,7 @@
             "style": "error"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.carouselPink}",
-            "borderColor": "{palette.color.trinidad}",
+            "backgroundColor": "{palette.color.notificationErrorBg}",
             "icon": "{palette.icon.ExclamationOctagon}",
             "iconColor": "{palette.color.trinidad}"
           }
@@ -1005,16 +999,16 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.gallery}",
-        "borderBottomWidth": "{palette.border.border1}",
-        "borderColor": "{palette.color.mortar}",
-        "borderLeftWidth": "{palette.border.border1}",
-        "borderRadius": "{palette.radius.radius4}",
-        "borderRightWidth": "{palette.border.border1}",
-        "borderTopWidth": "{palette.border.border1}",
-        "color": "{palette.color.dove}",
+        "borderBottomWidth": "{system.border.zero}",
+        "borderColor": "{system.color.transparent}",
+        "borderLeftWidth": "{system.border.zero}",
+        "borderRadius": "{system.radius.zero}",
+        "borderRightWidth": "{system.border.zero}",
+        "borderTopWidth": "{system.border.zero}",
+        "color": "{palette.color.black}",
         "dismissButtonGap": "{palette.size.size16}",
         "dismissIcon": "{palette.icon.Times}",
-        "dismissIconColor": "{palette.color.dove}",
+        "dismissIconColor": "{palette.color.black}",
         "dismissIconSize": "{palette.size.size16}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
@@ -1361,7 +1355,6 @@
             "hover": true
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
             "outerBorderColor": "{palette.color.gallery}",
             "outerBorderWidth": "{palette.border.border2}",
             "radioInputBorderColor": "{palette.color.darkMosque}"
@@ -1374,7 +1367,6 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.gallery}",
-            "borderColor": "{palette.color.dove}",
             "outerBorderColor": "{palette.color.gallery}",
             "outerBorderWidth": "{palette.border.border2}",
             "radioInputBorderColor": "{palette.color.darkMosque}"
@@ -1416,7 +1408,7 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.silver}",
+        "borderColor": "{palette.color.black}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
@@ -1681,7 +1673,7 @@
         "borderColor": "{palette.color.silver}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.dove}",
+        "color": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -1876,44 +1868,44 @@
         }
       ],
       "tokens": {
-        "completedIcon": "{system.icon.none}",
-        "completedIconColor": "{system.color.none}",
-        "completedIconSize": "{system.size.none}",
-        "connectorColor": "{palette.color.black}",
-        "connectorCompletedColor": "{palette.color.flirt}",
-        "connectorCompletedHeight": "{palette.border.border3}",
+        "completedIcon": "{palette.icon.Check}",
+        "completedIconColor": "{palette.color.white}",
+        "completedIconSize": "{palette.size.size10}",
+        "connectorColor": "{palette.color.mosque}",
+        "connectorCompletedColor": "{palette.color.mosque}",
+        "connectorCompletedHeight": "{palette.border.border1}",
         "connectorHeight": "{palette.border.border1}",
         "connectorMinWidth": "{palette.size.size16}",
         "containerPaddingBottom": "{system.size.none}",
         "containerPaddingLeft": "{system.size.none}",
         "containerPaddingRight": "{system.size.none}",
         "containerPaddingTop": "{system.size.none}",
-        "knobBackgroundColor": "{palette.color.white}",
-        "knobBorderColor": "{palette.color.black}",
+        "knobBackgroundColor": "{palette.color.transparent}",
+        "knobBorderColor": "{palette.color.mosque}",
         "knobBorderWidth": "{palette.border.border1}",
-        "knobCompletedBackgroundColor": "{palette.color.flirt}",
-        "knobCompletedBorderColor": "{palette.color.flirt}",
+        "knobCompletedBackgroundColor": "{palette.color.mosque}",
+        "knobCompletedBorderColor": "{palette.color.mosque}",
         "knobCompletedPaddingLeft": "{palette.size.size2}",
         "knobCompletedPaddingTop": "{palette.size.size2}",
-        "knobCurrentBackgroundColor": "{palette.color.transparent}",
-        "knobCurrentBorderColor": "{palette.color.flirt}",
-        "knobCurrentBorderWidth": "{palette.border.border2}",
-        "knobCurrentInnerColor": "{palette.color.flirt}",
-        "knobCurrentInnerSize": "{palette.size.size8}",
-        "knobCurrentPaddingLeft": "{palette.size.size2}",
-        "knobCurrentPaddingTop": "{palette.size.size2}",
-        "knobSize": "{palette.size.size16}",
-        "labelColor": "{palette.color.black}",
-        "labelCurrentColor": "{palette.color.flirt}",
+        "knobCurrentBackgroundColor": "{palette.color.mosque}",
+        "knobCurrentBorderColor": "{palette.color.mosque}",
+        "knobCurrentBorderWidth": "{palette.border.border1}",
+        "knobCurrentInnerColor": "{system.color.none}",
+        "knobCurrentInnerSize": "{system.size.none}",
+        "knobCurrentPaddingLeft": "{system.size.none}",
+        "knobCurrentPaddingTop": "{system.size.none}",
+        "knobSize": "{palette.size.size15}",
+        "labelColor": "{palette.color.mosque}",
+        "labelCurrentColor": "{palette.color.mosque}",
         "labelCurrentFontName": "{palette.fontName.StagSans}",
-        "labelCurrentFontWeight": "{palette.fontWeight.weight600}",
-        "labelDirection": "{system.direction.column}",
+        "labelCurrentFontWeight": "{palette.fontWeight.weight700}",
+        "labelDirection": "{system.direction.row}",
         "labelFontName": "{palette.fontName.StagSans}",
-        "labelFontSize": "{palette.fontSize.size14}",
+        "labelFontSize": "{palette.fontSize.size16}",
         "labelFontWeight": "{palette.fontWeight.weight400}",
         "labelGap": "{palette.size.size4}",
         "labelLineHeight": "{palette.lineHeight.multiply150}",
-        "labelMarginTop": "{palette.size.size8}",
+        "labelMarginTop": "{palette.size.size10}",
         "labelPaddingLeft": "{palette.size.size16}",
         "labelPaddingRight": "{palette.size.size16}",
         "showStepLabel": "{system.show.false}",
@@ -2202,7 +2194,7 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.silver}",
+        "borderColor": "{palette.color.black}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.dove}",
@@ -2318,6 +2310,12 @@
         "icon": "{system.icon.none}",
         "iconColor": "{palette.color.transparent}",
         "iconSize": "{palette.size.size16}",
+        "labelColor": "{palette.color.black}",
+        "labelFontName": "{palette.fontName.StagSans}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight400}",
+        "labelLineHeight": "{palette.lineHeight.multiply150}",
+        "labelMarginLeft": "{palette.size.size8}",
         "opacity": "{system.opacity.opaque}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
@@ -2340,6 +2338,18 @@
         "width": "{palette.size.size64}"
       }
     },
+    "ToggleSwitchGroup": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "alignItems": "{system.flexAlign.flexStart}",
+        "direction": "{system.direction.column}",
+        "flexGrow": "{system.integer.0}",
+        "flexShrink": "{system.integer.0}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "space": "{system.integer.3}"
+      }
+    },
     "Tooltip": {
       "appearances": {},
       "rules": [],