@telus-uds/theme-koodo 2.1.1 → 3.2.0

package/build/theme.js

@@ -1,13 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 10 May 2022 13:55:10 GMT
+ * Generated on Fri, 12 Aug 2022 20:14:25 GMT
  *
  */
 
-const PaletteIconCheck = require('@telus-uds/palette-koodo/build/rn/icons/Check')
-const PaletteIconChevronLeft = require('@telus-uds/palette-koodo/build/rn/icons/ChevronLeft')
 const PaletteIconChevronRight = require('@telus-uds/palette-koodo/build/rn/icons/ChevronRight')
+const PaletteIconChevronLeft = require('@telus-uds/palette-koodo/build/rn/icons/ChevronLeft')
+const PaletteIconCheck = require('@telus-uds/palette-koodo/build/rn/icons/Check')
 const PaletteIconChevronUp = require('@telus-uds/palette-koodo/build/rn/icons/ChevronUp')
 const PaletteIconChevronDown = require('@telus-uds/palette-koodo/build/rn/icons/ChevronDown')
 const PaletteIconCheckCircledFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled')
@@ -209,6 +209,7 @@ module.exports = {
       tokens: {
         alignItems: 'center',
         direction: 'row',
+        fieldSpace: 2,
         flexGrow: 0,
         flexShrink: 0,
         justifyContent: 'flex-start',
@@ -335,6 +336,134 @@ module.exports = {
         shadow: null
       }
     },
+    Carousel: {
+      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' ] },
+          tokens: { showPreviousNextNavigation: false, thumbnailSize: 48 }
+        }
+      ],
+      tokens: {
+        nextIcon: PaletteIconChevronRight,
+        previousIcon: PaletteIconChevronLeft,
+        showPanelNavigation: true,
+        showPreviousNextNavigation: true,
+        spaceBetweenSlideAndPanelNavigation: 32,
+        spaceBetweenSlideAndPreviousNextNavigation: 24,
+        thumbnailBorderColor: '#f9f6a5',
+        thumbnailBorderRadius: 4,
+        thumbnailBorderWidth: 1,
+        thumbnailContainerPaddingTop: 24,
+        thumbnailMargin: 4,
+        thumbnailPadding: 8,
+        thumbnailSelectedBorderColor: '#016b6a',
+        thumbnailSelectedBorderWidth: 2,
+        thumbnailSize: 64
+      }
+    },
+    CarouselTabsPanelItem: {
+      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.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          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 ]
+        },
+        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: {
+            borderBottomColor: '#016b6a',
+            borderBottomWidth: 2,
+            color: '#016b6a'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomColor: '#016b6a',
+            borderBottomWidth: 4,
+            color: '#016b6a'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            borderBottomColor: '#014847',
+            borderBottomWidth: 2,
+            color: '#014847'
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { borderBottomWidth: 4 }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            borderBottomColor: '#c9c8c8',
+            borderBottomWidth: 4,
+            color: '#c9c8c8'
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            borderBottomColor: '#c9c8c8',
+            borderBottomWidth: 2,
+            color: '#c9c8c8',
+            fontName: 'StagSans',
+            fontWeight: '400'
+          }
+        }
+      ],
+      tokens: {
+        alignItems: 'flex-start',
+        borderBottomColor: 'transparent',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: 1,
+        color: '#016b6a',
+        flex: 1,
+        fontName: 'StagSans',
+        fontScaleCap: 64,
+        fontSize: 14,
+        fontWeight: '400',
+        justifyContent: 'flex-start',
+        letterSpacing: 0,
+        lineHeight: 1.1,
+        paddingBottom: 16,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0
+      }
+    },
     Checkbox: {
       appearances: {
         checked: {
@@ -1680,6 +1809,21 @@ module.exports = {
         squareRadius: 4
       }
     },
+    SkipLink: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        backgroundColor: '#014847',
+        borderRadius: 12,
+        color: '#ffffff',
+        outlineColor: '#016b6a',
+        outlineOffset: 0,
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        paddingHorizontal: 8,
+        paddingVertical: 8
+      }
+    },
     StackView: {
       appearances: {},
       rules: [],
@@ -2137,6 +2281,7 @@ module.exports = {
       tokens: {
         alignItems: 'flex-start',
         direction: 'column',
+        fieldSpace: 2,
         flexGrow: 0,
         flexShrink: 0,
         justifyContent: 'flex-start',
@@ -2375,5 +2520,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '1.5.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.2.0' }
 }

package/package.json

@@ -1,36 +1,35 @@
 {
-  "name": "@telus-uds/theme-koodo",
-  "version": "2.1.1",
+  "author": "TELUS Digital",
+  "bugs": {
+    "url": "https://github.com/telus/universal-design-system/issues"
+  },
   "description": "Koodo theme",
+  "devDependencies": {
+    "@telus-uds/palette-koodo": "^0.1.2",
+    "@telus-uds/system-theme-tokens": "^2.2.0"
+  },
+  "files": [
+    "build",
+    "theme.json"
+  ],
+  "homepage": "https://github.com/telus/universal-design-system#readme",
   "keywords": [
     "koodo"
   ],
-  "author": "TELUS Digital",
-  "homepage": "https://github.com/telus/koodo-design-system#readme",
   "license": "UNLICENSED",
   "main": "build/theme.js",
-  "files": [
-    "build",
-    "theme.json"
-  ],
-  "dependencies": {},
+  "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
     "@telus-uds/palette-koodo": "^0.1.2"
   },
-  "devDependencies": {
-    "@telus-uds/palette-koodo": "^0.1.2",
-    "@telus-uds/system-theme-tokens": "^1.5.0"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/telus/koodo-design-system.git"
+    "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
     "release": "standard-version",
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
-    "dev": "nodemon -w src -x 'yarn build'"
+    "dev": "nodemon -w src -x 'npm run build'"
   },
-  "bugs": {
-    "url": "https://github.com/telus/koodo-design-system/issues"
-  }
+  "version": "3.2.0"
 }

package/theme.json

@@ -242,6 +242,7 @@
       "tokens": {
         "alignItems": "{system.flexAlign.center}",
         "direction": "{system.direction.row}",
+        "fieldSpace": "{system.integer.2}",
         "flexGrow": "{system.integer.0}",
         "flexShrink": "{system.integer.0}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
@@ -377,6 +378,130 @@
         "shadow": "{system.shadow.none}"
       }
     },
+    "Carousel": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "showPreviousNextNavigation": "{system.show.false}",
+            "thumbnailSize": "{palette.size.size48}"
+          }
+        }
+      ],
+      "tokens": {
+        "nextIcon": "{palette.icon.ChevronRight}",
+        "previousIcon": "{palette.icon.ChevronLeft}",
+        "showPanelNavigation": "{system.show.true}",
+        "showPreviousNextNavigation": "{system.show.true}",
+        "spaceBetweenSlideAndPanelNavigation": "{palette.size.size32}",
+        "spaceBetweenSlideAndPreviousNextNavigation": "{palette.size.size24}",
+        "thumbnailBorderColor": "{palette.color.texas}",
+        "thumbnailBorderRadius": "{palette.radius.radius4}",
+        "thumbnailBorderWidth": "{palette.border.border1}",
+        "thumbnailContainerPaddingTop": "{palette.size.size24}",
+        "thumbnailMargin": "{palette.size.size4}",
+        "thumbnailPadding": "{palette.size.size8}",
+        "thumbnailSelectedBorderColor": "{palette.color.mosque}",
+        "thumbnailSelectedBorderWidth": "{palette.border.border2}",
+        "thumbnailSize": "{palette.size.size64}"
+      }
+    },
+    "CarouselTabsPanelItem": {
+      "appearances": {
+        "focus": "{appearances.CarouselTabsPanelItem.focus}",
+        "hover": "{appearances.CarouselTabsPanelItem.hover}",
+        "inactive": "{appearances.CarouselTabsPanelItem.inactive}",
+        "pressed": "{appearances.CarouselTabsPanelItem.pressed}",
+        "selected": "{appearances.CarouselTabsPanelItem.selected}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.mosque}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.mosque}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.darkMosque}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.darkMosque}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderBottomWidth": "{palette.border.border4}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.silver}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.silver}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.silver}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontWeight": "{palette.fontWeight.weight400}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignItems": "{system.flexAlign.flexStart}",
+        "borderBottomColor": "{system.color.transparent}",
+        "borderBottomStyle": "{system.borderStyle.solid}",
+        "borderBottomWidth": "{palette.border.border1}",
+        "color": "{palette.color.mosque}",
+        "flex": "{system.integer.1}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontScaleCap": "{palette.fontSize.size64}",
+        "fontSize": "{palette.fontSize.size14}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "letterSpacing": "{system.letterSpacing.none}",
+        "lineHeight": "{palette.lineHeight.multiply110}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{system.size.zero}",
+        "paddingRight": "{system.size.zero}",
+        "paddingTop": "{system.size.zero}"
+      }
+    },
     "Checkbox": {
       "appearances": {
         "checked": "{appearances.Checkbox.checked}",
@@ -1849,6 +1974,21 @@
         "squareRadius": "{palette.radius.radius4}"
       }
     },
+    "SkipLink": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "backgroundColor": "{palette.color.darkMosque}",
+        "borderRadius": "{palette.radius.radius12}",
+        "color": "{palette.color.white}",
+        "outlineColor": "{palette.color.mosque}",
+        "outlineOffset": "{system.border.zero}",
+        "outlineStyle": "{system.borderStyle.solid}",
+        "outlineWidth": "{palette.border.border2}",
+        "paddingHorizontal": "{palette.size.size8}",
+        "paddingVertical": "{palette.size.size8}"
+      }
+    },
     "StackView": {
       "appearances": {},
       "rules": [],
@@ -2351,6 +2491,7 @@
       "tokens": {
         "alignItems": "{system.flexAlign.flexStart}",
         "direction": "{system.direction.column}",
+        "fieldSpace": "{system.integer.2}",
         "flexGrow": "{system.integer.0}",
         "flexShrink": "{system.integer.0}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",