@telus-uds/theme-allium 0.1.0-prerelease.0 → 1.0.0-prerelease.0

package/build/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Dec 2021 09:03:35 GMT
+ * Generated on Thu, 20 Jan 2022 13:37:14 GMT
  *
  */
 
@@ -267,6 +267,7 @@ module.exports = {
         alignItems: 'center',
         direction: 'row',
         flexGrow: 0,
+        flexShrink: 0,
         justifyContent: 'flex-start',
         space: 1
       }
@@ -551,12 +552,21 @@ module.exports = {
           description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           type: 'state',
           values: [ true ]
+        },
+        size: {
+          description: 'Sets the size of the text and icon; these variants are shared with Link',
+          type: 'variant',
+          values: [ 'large', 'small', 'micro' ]
         }
       },
-      rules: [ { if: { hover: true }, tokens: { iconDisplace: 4 } } ],
+      rules: [
+        { if: { hover: true }, tokens: { iconDisplace: 4 } },
+        { if: { size: 'large' }, tokens: { iconSize: 24 } }
+      ],
       tokens: {
         iconDisplace: 0,
-        iconSpace: 0,
+        iconSize: 20,
+        iconSpace: 1,
         leftIcon: PaletteIconArrowLeft,
         rightIcon: PaletteIconArrowRight
       }
@@ -581,7 +591,7 @@ module.exports = {
     ExpandCollapse: {
       appearances: {},
       rules: [],
-      tokens: { borderColor: '#b2b9bf', borderStyle: 'solid', borderWidth: 1 }
+      tokens: { borderColor: '#b2b9bf', borderStyle: 'solid', borderWidth: 0 }
     },
     ExpandCollapseControl: {
       appearances: {
@@ -683,6 +693,52 @@ module.exports = {
         titleFontSize: 16
       }
     },
+    HorizontalScrollButton: {
+      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 ]
+        },
+        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: { borderColor: '#414547', iconColor: '#414547' }
+        },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#676e73', iconColor: '#ffffff' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        borderRadius: 32,
+        borderWidth: 1,
+        iconColor: '#676e73',
+        iconSize: 32,
+        padding: 0,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
     Icon: {
       appearances: {
         rank: { type: 'variant', values: [ 'primary' ] },
@@ -1626,7 +1682,7 @@ module.exports = {
         fontWeight: '500',
         letterSpacing: 0,
         lineHeight: 1.4,
-        minWidth: 288,
+        minWidth: 264,
         outerBorderColor: 'transparent',
         outerBorderGap: 0,
         outerBorderWidth: 0,
@@ -2049,6 +2105,7 @@ module.exports = {
       tokens: {
         alignItems: 'stretch',
         flexGrow: 0,
+        flexShrink: 0,
         justifyContent: 'flex-start'
       }
     },
@@ -2208,52 +2265,6 @@ module.exports = {
         textTransform: 'none'
       }
     },
-    TabsScrollButton: {
-      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 ]
-        },
-        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: { borderColor: '#414547', iconColor: '#414547' }
-        },
-        {
-          if: { pressed: true },
-          tokens: { backgroundColor: '#676e73', iconColor: '#ffffff' }
-        }
-      ],
-      tokens: {
-        backgroundColor: '#ffffff',
-        borderColor: '#b2b9bf',
-        borderRadius: 32,
-        borderWidth: 1,
-        iconColor: '#676e73',
-        iconSize: 32,
-        padding: 0,
-        shadow: {
-          blur: 2,
-          color: 'rgba(0, 0, 0, 0.1)',
-          inset: false,
-          offsetX: 0,
-          offsetY: 2,
-          spread: 0
-        }
-      }
-    },
     Tags: {
       appearances: {
         viewport: {
@@ -2267,6 +2278,7 @@ module.exports = {
         alignItems: 'center',
         direction: 'row',
         flexGrow: 0,
+        flexShrink: 0,
         justifyContent: 'flex-start',
         space: 1
       }
@@ -2974,5 +2986,9 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'allium', package: '@telus-uds/theme-allium' }
+  metadata: {
+    name: 'allium',
+    package: '@telus-uds/theme-allium',
+    themeTokensVersion: '0.0.2-prerelease.0'
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "0.1.0-prerelease.0",
+  "version": "1.0.0-prerelease.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
@@ -8,11 +8,12 @@
   "main": "build/theme.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^1.0.0-prerelease.1",
-    "@telus-uds/system-themes": "^0.0.2-prerelease.2"
+    "@telus-uds/palette-allium": "^1.0.0-prerelease.2",
+    "@telus-uds/system-themes": "^0.0.2-prerelease.2",
+    "@telus-uds/system-theme-tokens": "^0.0.2-prerelease.0"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^1.0.0-prerelease.1"
+    "@telus-uds/palette-allium": "^1.0.0-prerelease.2"
   },
   "files": [
     "build",
@@ -24,7 +25,7 @@
   },
   "scripts": {
     "release": "standard-version",
-    "build": "THEME_PATH=./theme.json UDS_THEME_MODULE_PALETTE=@telus-uds/palette-allium UDS_THEME_MODULE_SYSTEM=@telus-uds/system-themes/src/tokens/rn UDS_THEME_MODULE_APPEARANCES=@telus-uds/system-themes/schema/appearances system-themes-build",
+    "build": "THEME_PATH=./theme.json UDS_THEME_MODULE_PALETTE=@telus-uds/palette-allium UDS_THEME_MODULE_SYSTEM=@telus-uds/system-themes/src/tokens/rn UDS_THEME_MODULE_APPEARANCES=@telus-uds/system-theme-tokens/appearances system-themes-build",
     "dev": "nodemon -w src -x 'yarn build'"
   },
   "bugs": {

package/theme.json

@@ -386,7 +386,8 @@
         "direction": "{system.direction.row}",
         "alignItems": "{system.flexAlign.center}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "flexGrow": "{system.integer.0}"
+        "flexGrow": "{system.integer.0}",
+        "flexShrink": "{system.integer.0}"
       },
       "rules": [
         {
@@ -712,13 +713,19 @@
     },
     "ChevronLink": {
       "appearances": {
-        "hover": "{appearances.ChevronLink.hover}"
+        "hover": "{appearances.ChevronLink.hover}",
+        "size": {
+          "description": "Sets the size of the text and icon; these variants are shared with Link",
+          "values": ["large", "small", "micro"],
+          "type": "variant"
+        }
       },
       "tokens": {
         "leftIcon": "{palette.icon.ArrowLeft}",
         "rightIcon": "{palette.icon.ArrowRight}",
         "iconDisplace": "{palette.size.size0}",
-        "iconSpace": "{system.integer.0}"
+        "iconSpace": "{system.integer.1}",
+        "iconSize": "{palette.size.size20}"
       },
       "rules": [
         {
@@ -728,6 +735,14 @@
           "tokens": {
             "iconDisplace": "{palette.size.size4}"
           }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size24}"
+          }
         }
       ]
     },
@@ -782,7 +797,7 @@
       "appearances": {},
       "tokens": {
         "borderColor": "{palette.color.greyCloud}",
-        "borderWidth": "{palette.border.border1}",
+        "borderWidth": "{system.border.zero}",
         "borderStyle": "{system.borderStyle.solid}"
       },
       "rules": []
@@ -902,6 +917,43 @@
         }
       ]
     },
+    "HorizontalScrollButton": {
+      "appearances": {
+        "hover": "{appearances.HorizontalScrollButton.hover}",
+        "focus": "{appearances.HorizontalScrollButton.focus}",
+        "pressed": "{appearances.HorizontalScrollButton.pressed}"
+      },
+      "tokens": {
+        "borderRadius": "{palette.radius.pill32}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.greyCloud}",
+        "borderWidth": "{palette.border.border1}",
+        "padding": "{system.size.zero}",
+        "shadow": "{palette.shadow.surfaceRaised}",
+        "iconSize": "{palette.size.size32}",
+        "iconColor": "{palette.color.greyShuttle}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyCharcoal}",
+            "iconColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "iconColor": "{palette.color.white}"
+          }
+        }
+      ]
+    },
     "Icon": {
       "appearances": {
         "size": {
@@ -1980,7 +2032,7 @@
         "paddingLeft": "{palette.size.size10}",
         "paddingRight": "{palette.size.size16}",
         "paddingTop": "{palette.size.size16}",
-        "minWidth": "{palette.size.size288}",
+        "minWidth": "{palette.size.size264}",
         "shadow": "{system.shadow.none}",
         "radioCheckedBackgroundColor": "{palette.color.purpleDeluge}",
         "radioCheckedSize": "{palette.size.size12}",
@@ -2412,43 +2464,6 @@
         }
       ]
     },
-    "TabsScrollButton": {
-      "appearances": {
-        "hover": "{appearances.TabsScrollButton.hover}",
-        "focus": "{appearances.TabsScrollButton.focus}",
-        "pressed": "{appearances.TabsScrollButton.pressed}"
-      },
-      "tokens": {
-        "borderRadius": "{palette.radius.pill32}",
-        "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.greyCloud}",
-        "borderWidth": "{palette.border.border1}",
-        "padding": "{system.size.zero}",
-        "shadow": "{palette.shadow.surfaceRaised}",
-        "iconSize": "{palette.size.size32}",
-        "iconColor": "{palette.color.greyShuttle}"
-      },
-      "rules": [
-        {
-          "if": {
-            "hover": true
-          },
-          "tokens": {
-            "borderColor": "{palette.color.greyCharcoal}",
-            "iconColor": "{palette.color.greyCharcoal}"
-          }
-        },
-        {
-          "if": {
-            "pressed": true
-          },
-          "tokens": {
-            "backgroundColor": "{palette.color.greyShuttle}",
-            "iconColor": "{palette.color.white}"
-          }
-        }
-      ]
-    },
     "TextArea": {
       "appearances": {},
       "tokens": {
@@ -3373,7 +3388,8 @@
       "tokens": {
         "alignItems": "{system.flexAlign.stretch}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "flexGrow": "{system.integer.0}"
+        "flexGrow": "{system.integer.0}",
+        "flexShrink": "{system.integer.0}"
       },
       "rules": []
     },
@@ -3386,7 +3402,8 @@
         "direction": "{system.direction.row}",
         "alignItems": "{system.flexAlign.center}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "flexGrow": "{system.integer.0}"
+        "flexGrow": "{system.integer.0}",
+        "flexShrink": "{system.integer.0}"
       },
       "rules": [
         {