@telus-uds/theme-allium 0.1.0-prerelease.0 → 2.0.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 Mon, 28 Feb 2022 16:09:25 GMT
  *
  */
 
@@ -16,8 +16,8 @@ const PaletteIconClose = require('@telus-uds/palette-allium/build/rn/icons/Close
 const PaletteIconStatusWarning = require('@telus-uds/palette-allium/build/rn/icons/StatusWarning')
 const PaletteIconTimes = require('@telus-uds/palette-allium/build/rn/icons/Times')
 const PaletteIconSearchBold = require('@telus-uds/palette-allium/build/rn/icons/SearchBold')
-const PaletteIconQuestion = require('@telus-uds/palette-allium/build/rn/icons/Question')
 const PaletteIconAdd = require('@telus-uds/palette-allium/build/rn/icons/Add')
+const PaletteIconQuestion = require('@telus-uds/palette-allium/build/rn/icons/Question')
 
 module.exports = {
   components: {
@@ -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' ] },
@@ -1046,6 +1102,7 @@ module.exports = {
       tokens: {
         dividerColor: '#b2b9bf',
         dividerSize: 1,
+        iconMarginTop: 4,
         interItemMargin: 8,
         interItemMarginWithDivider: 16,
         itemBulletColor: '#4b286d',
@@ -1059,7 +1116,7 @@ module.exports = {
         itemIconColor: '#4b286d',
         itemIconSize: 16,
         itemLineHeight: 1.5,
-        listGutter: 12
+        listGutter: 16
       }
     },
     Modal: {
@@ -1626,7 +1683,7 @@ module.exports = {
         fontWeight: '500',
         letterSpacing: 0,
         lineHeight: 1.4,
-        minWidth: 288,
+        minWidth: 264,
         outerBorderColor: 'transparent',
         outerBorderGap: 0,
         outerBorderWidth: 0,
@@ -2037,7 +2094,7 @@ module.exports = {
         baseWidth: 40,
         characters: 10,
         color: '#b2b9bf',
-        radius: 120,
+        radius: 99999999999999,
         size: 3,
         spaceBetweenLines: 2,
         squareRadius: 4
@@ -2049,6 +2106,7 @@ module.exports = {
       tokens: {
         alignItems: 'stretch',
         flexGrow: 0,
+        flexShrink: 0,
         justifyContent: 'flex-start'
       }
     },
@@ -2208,52 +2266,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 +2279,7 @@ module.exports = {
         alignItems: 'center',
         direction: 'row',
         flexGrow: 0,
+        flexShrink: 0,
         justifyContent: 'flex-start',
         space: 1
       }
@@ -2974,5 +2987,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'allium', package: '@telus-uds/theme-allium' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '1.1.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "0.1.0-prerelease.0",
+  "version": "2.0.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",
+    "@telus-uds/system-theme-tokens": "^1.1.0",
+    "@telus-uds/system-themes": "^0.0.1"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^1.0.0-prerelease.1"
+    "@telus-uds/palette-allium": "^1.0.0"
   },
   "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": "UDS_PALETTE=@telus-uds/palette-allium system-themes-build",
     "dev": "nodemon -w src -x 'yarn build'"
   },
   "bugs": {