@telus-uds/themes-community.theme-allium 0.2.2 → 0.3.0

package/build/web/theme.js

@@ -1,11 +1,11 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 17 May 2024 16:24:19 GMT
+ * Generated on Mon, 24 Jun 2024 16:18:11 GMT
  *
  */
 
-
+import PaletteIconLinkExternal from '@telus-uds/palette-allium/build/rn/icons/LinkExternal'
 const theme = {
   components: {
     ContentCard: {
@@ -48,11 +48,81 @@ const theme = {
         shadow: null
       }
     },
-    StickyNavigationBar: { appearances: {}, rules: [], tokens: {} }
+    StickyNavigationBarTabs: {
+      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, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true, false ]
+        },
+        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, false ]
+        },
+        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: { focus: true },
+          tokens: { color: '#414547', outerBorderColor: '#414547' }
+        },
+        {
+          if: { hover: true },
+          tokens: { color: '#2c2e30', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            blockFontName: 'HelveticaNow',
+            blockFontWeight: '700',
+            color: '#2c2e30'
+          }
+        }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        blockFontName: 'HelveticaNow',
+        blockFontSize: 14,
+        blockFontWeight: '400',
+        blockLineHeight: 1.5,
+        borderRadius: 4,
+        color: '#2c2e30',
+        externalLinkIcon: PaletteIconLinkExternal,
+        icon: null,
+        iconSize: 20,
+        iconSpace: 1,
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 2,
+        outerBorderOutline: 'none',
+        outerBorderWidth: 2,
+        textLine: 'none',
+        textLineStyle: 'solid'
+      }
+    }
   },
   metadata: {
     name: 'themes-community.theme-allium',
-    themeTokensVersion: '2.56.0'
+    themeTokensVersion: '2.58.0'
   }
 }
 export default theme

package/package.json

@@ -6,7 +6,7 @@
   "description": "Sample theme",
   "devDependencies": {
     "@telus-uds/palette-allium": "*",
-    "@telus-uds/system-theme-tokens": "^2.56.0"
+    "@telus-uds/system-theme-tokens": "^2.58.0"
   },
   "files": [
     "build",
@@ -25,5 +25,5 @@
     "build": "UDS_PALETTE=@telus-uds/palette-allium  system-tokens-build-subtheme",
     "dev": "nodemon -w src -x 'npm run build'"
   },
-  "version": "0.2.2"
+  "version": "0.3.0"
 }

package/theme.json

@@ -62,10 +62,98 @@
         "shadow": "{system.shadow.none}"
       }
     },
-    "StickyNavigationBar": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {}
+    "StickyNavigationBarTabs": {
+      "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, false]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "type": "state",
+          "values": [true, false]
+        },
+        "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, false]
+        },
+        "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": {
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "blockFontName": "{palette.fontName.HelveticaNow}",
+            "blockFontWeight": "{palette.fontWeight.weight700}",
+            "color": "{palette.color.greyThunder}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "blockFontName": "{palette.fontName.HelveticaNow}",
+        "blockFontSize": "{palette.fontSize.size14}",
+        "blockFontWeight": "{palette.fontWeight.weight400}",
+        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.greyThunder}",
+        "externalLinkIcon": "{palette.icon.LinkExternal}",
+        "icon": "{system.icon.none}",
+        "iconSize": "{palette.size.size20}",
+        "iconSpace": "{system.integer.1}",
+        "iconTranslateX": "{system.size.zero}",
+        "iconTranslateY": "{system.size.zero}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderGap": "{palette.size.size2}",
+        "outerBorderOutline": "{system.borderStyle.none}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "textLine": "{system.textLine.none}",
+        "textLineStyle": "{system.textLineStyle.solid}"
+      }
     }
   }
 }

package/build/android/StickyNavigationBar.json

@@ -1,5 +0,0 @@
-{
-  "appearances": {},
-  "rules": [],
-  "tokens": {}
-}

package/build/ios/StickyNavigationBar.json

@@ -1,5 +0,0 @@
-{
-  "appearances": {},
-  "rules": [],
-  "tokens": {}
-}

package/build/rn/StickyNavigationBar.js

@@ -1,10 +0,0 @@
-/*
- *
- * Do not edit directly
- * Generated on Fri, 17 May 2024 16:24:04 GMT
- *
- */
-
-
-
-module.exports = { appearances: {}, rules: [], tokens: {} }

package/build/web/StickyNavigationBar.js

@@ -1,10 +0,0 @@
-/*
- *
- * Do not edit directly
- * Generated on Fri, 17 May 2024 16:24:19 GMT
- *
- */
-
-
-const theme = { appearances: {}, rules: [], tokens: {} }
-export default theme