@telus-uds/theme-koodo 5.3.0 → 5.4.0

package/build/web/Typography.js

@@ -0,0 +1,231 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    bold: {
+      description: 'Sets the font weight, to bold on some body text styles. Does not change accessibility properties.',
+      type: 'variant',
+      values: [ true ]
+    },
+    colour: {
+      type: 'variant',
+      values: [
+        'default',      'brand',
+        'dark',         'light',
+        'positive',     'warning',
+        'danger',       'black',
+        'white',        'brand2',
+        'brand3',       'alternative1',
+        'alternative2', 'alternative3'
+      ]
+    },
+    compact: {
+      description: 'Reduces line height on some body text styles. For data-rich content, not for flow content',
+      type: 'variant',
+      values: [ true ]
+    },
+    inverse: {
+      description: 'Styles the link white for use on dark backgrounds.',
+      type: 'variant',
+      values: [ true ]
+    },
+    size: {
+      type: 'variant',
+      values: [
+        'micro',    'small',
+        'medium',   'large',
+        'eyebrow',  'h1',
+        'h2',       'h3',
+        'h4',       'h5',
+        'h6',       'display1',
+        'display2'
+      ]
+    },
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    },
+    weight: {
+      description: 'Sets the font weight, default is regular 400 weight. Does not change accessibility properties.',
+      type: 'variant',
+      values: [ 'semibold', 'bold' ]
+    }
+  },
+  rules: [
+    {
+      if: { weight: 'semibold' },
+      tokens: { fontName: 'StagSans', fontWeight: '600' }
+    },
+    {
+      if: { weight: 'bold' },
+      tokens: { fontName: 'StagSans', fontWeight: '700' }
+    },
+    {
+      description: 'Please only bold single words while using with headings',
+      if: { bold: true },
+      tokens: { fontName: 'StagSans', fontWeight: '600' }
+    },
+    {
+      if: { size: 'large' },
+      tokens: { fontSize: 20, lineHeight: 1.4 }
+    },
+    {
+      if: { size: 'eyebrow' },
+      tokens: {
+        color: '#000000',
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '600',
+        lineHeight: 1.42857142857,
+        textTransform: 'uppercase'
+      }
+    },
+    {
+      if: { compact: true, size: 'large' },
+      tokens: { lineHeight: 1.2 }
+    },
+    {
+      if: { size: 'medium' },
+      tokens: { fontSize: 16, lineHeight: 1.5 }
+    },
+    {
+      if: { compact: true, size: 'medium' },
+      tokens: { lineHeight: 1.25 }
+    },
+    {
+      if: { size: 'small' },
+      tokens: { fontSize: 14, lineHeight: 1.42857142857 }
+    },
+    {
+      if: { compact: true, size: 'small' },
+      tokens: { lineHeight: 1.14285714286 }
+    },
+    {
+      if: { size: 'micro' },
+      tokens: { fontSize: 12, lineHeight: 1.33333333333 }
+    },
+    {
+      if: { compact: true, size: 'micro' },
+      tokens: { lineHeight: 1.33333333333 }
+    },
+    {
+      if: { size: 'display1' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 44,
+        fontWeight: '700',
+        lineHeight: 1.22222222222
+      }
+    },
+    {
+      if: { size: 'display1', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontSize: 70, lineHeight: 1.2 }
+    },
+    {
+      if: { size: 'display2' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 36,
+        fontWeight: '700',
+        lineHeight: 1.22222222222
+      }
+    },
+    {
+      if: { size: 'display2', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontSize: 54, lineHeight: 1.14285714286 }
+    },
+    {
+      if: { size: 'h1' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 34,
+        fontWeight: '700',
+        lineHeight: 1.22222222222
+      }
+    },
+    {
+      if: { size: 'h1', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontSize: 44, lineHeight: 1.22222222222 }
+    },
+    {
+      if: { size: 'h2' },
+      tokens: {
+        color: '#000000',
+        fontName: 'StagSans',
+        fontSize: 32,
+        fontWeight: '700',
+        lineHeight: 1.25
+      }
+    },
+    {
+      if: { size: 'h3' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 24,
+        fontWeight: '700',
+        lineHeight: 1.33333333333
+      }
+    },
+    {
+      if: { size: 'h4' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 20,
+        fontWeight: '700',
+        lineHeight: 1.2
+      }
+    },
+    {
+      if: { size: 'h5' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 18,
+        fontWeight: '700',
+        lineHeight: 1.22222222222
+      }
+    },
+    {
+      if: { size: 'h6' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '700',
+        lineHeight: 1.25
+      }
+    },
+    { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    { if: { colour: 'default' }, tokens: { color: '#000000' } },
+    { if: { colour: 'brand' }, tokens: { color: '#ff0076' } },
+    { if: { colour: 'dark' }, tokens: { color: '#595959' } },
+    { if: { colour: 'light' }, tokens: { color: '#666666' } },
+    { if: { colour: 'positive' }, tokens: { color: '#1c7b2b' } },
+    { if: { colour: 'warning' }, tokens: { color: '#c9370b' } },
+    { if: { colour: 'danger' }, tokens: { color: '#c9370b' } },
+    { if: { colour: 'black' }, tokens: { color: '#000000' } },
+    { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
+    { if: { colour: 'brand2' }, tokens: { color: '#7a3dfc' } },
+    { if: { colour: 'brand3' }, tokens: { color: '#5b2bc2' } },
+    { if: { colour: 'alternative1' }, tokens: { color: '#404040' } },
+    { if: { colour: 'alternative2' }, tokens: { color: '#dd0066' } },
+    { if: { colour: 'alternative3' }, tokens: { color: '#1c7b2b' } }
+  ],
+  tokens: {
+    color: '#000000',
+    fontName: 'StagSans',
+    fontScaleCap: 64,
+    fontSize: 16,
+    fontWeight: '400',
+    letterSpacing: 0,
+    lineHeight: 1.5,
+    superScriptFontSize: null,
+    textTransform: 'none'
+  }
+}
+export default theme

package/build/web/Video.js

@@ -0,0 +1,21 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+import PaletteIconPause from '@telus-uds/palette-koodo/build/rn/icons/Pause'
+import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
+import PaletteIconReplay from '@telus-uds/palette-koodo/build/rn/icons/Replay'
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    borderColor: '#000000',
+    pauseIcon: PaletteIconPause,
+    playIcon: PaletteIconPlaySolid,
+    replayIcon: PaletteIconReplay
+  }
+}
+export default theme

package/build/web/VideoButton.js

@@ -0,0 +1,10 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = { appearances: {}, rules: [], tokens: { color: '#ffffff' } }
+export default theme

package/build/web/VideoControlBar.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+import PaletteIconClosedCaptions from '@telus-uds/palette-koodo/build/rn/icons/ClosedCaptions'
+import PaletteIconFullscreenExpand from '@telus-uds/palette-koodo/build/rn/icons/FullscreenExpand'
+import PaletteIconFullscreenMinimize from '@telus-uds/palette-koodo/build/rn/icons/FullscreenMinimize'
+import PaletteIconSettingsSolid from '@telus-uds/palette-koodo/build/rn/icons/SettingsSolid'
+const theme = {
+  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: {
+        height: 40,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8
+      }
+    }
+  ],
+  tokens: {
+    captionsIcon: PaletteIconClosedCaptions,
+    height: 56,
+    maximizeIcon: PaletteIconFullscreenExpand,
+    menuBottom: 64,
+    menuMarginLeft: 16,
+    menuRight: 32,
+    minimizeIcon: PaletteIconFullscreenMinimize,
+    paddingBottom: 16,
+    paddingLeft: 48,
+    paddingRight: 48,
+    paddingTop: 16,
+    settingsIcon: PaletteIconSettingsSolid
+  }
+}
+export default theme

package/build/web/VideoMenu.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+import PaletteIconCheck from '@telus-uds/palette-koodo/build/rn/icons/Check'
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    background: '#000000',
+    checkMarkFocusColor: '#016b6a',
+    checkMarkHeight: 24,
+    checkMarkHoverColor: '#016b6a',
+    checkMarkIcon: PaletteIconCheck,
+    checkMarkSelectedColor: '#000000',
+    checkMarkUnselectedColor: 'rgba(0, 0, 0, 0)',
+    checkMarkWidth: 24,
+    padding: 16
+  }
+}
+export default theme

package/build/web/VideoMiddleControlButton.js

@@ -0,0 +1,19 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    background: '#000000',
+    height: 64,
+    iconColor: '#ffffff',
+    width: 64
+  }
+}
+export default theme

package/build/web/VideoPicker.js

@@ -0,0 +1,22 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    framedContainerBackgroundColor: '#fafafa',
+    framedContainerBorderColor: '#c9c8c8',
+    framedContainerBorderRadius: 4,
+    framedContainerBorderWidth: 1,
+    framedContainerPadding: 24,
+    framedMaxHeight: 640,
+    stackViewDividerColor: '#c9c8c8'
+  }
+}
+export default theme

package/build/web/VideoPickerSlider.js

@@ -0,0 +1,18 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+import PaletteIconArrowRight from '@telus-uds/palette-koodo/build/rn/icons/ArrowRight'
+import PaletteIconArrowLeft from '@telus-uds/palette-koodo/build/rn/icons/ArrowLeft'
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    nextIcon: PaletteIconArrowRight,
+    previousIcon: PaletteIconArrowLeft
+  }
+}
+export default theme

package/build/web/VideoPickerThumbnail.js

@@ -0,0 +1,54 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    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: { pressed: true },
+      tokens: {
+        borderColor: '#595959',
+        borderWidth: 3,
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: { borderColor: '#7a3dfc', titleColor: '#7a3dfc' }
+    }
+  ],
+  tokens: {
+    borderColor: '#c9c8c8',
+    borderRadius: 4,
+    borderWidth: 2,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 2,
+    outerBorderRadius: 8,
+    outerBorderWidth: 2,
+    pressableBorderTopColor: '#c9c8c8',
+    pressableBorderTopWidth: 1,
+    pressablePaddingBottom: 16,
+    pressablePaddingHorizontal: 24,
+    pressablePaddingVertical: 16,
+    splashButtonRadius: 4,
+    subTitleColor: '#595959',
+    titleColor: '#000000'
+  }
+}
+export default theme

package/build/web/VideoProgressBar.js

@@ -0,0 +1,23 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    rangeBackground: 'rgba(0, 0, 0, 0)',
+    thumbBackground: '#ffffff',
+    thumbHeight: 8,
+    thumbWidth: 8,
+    timestampMarginLeft: 8,
+    timestampMarginRight: 8,
+    trackGradientEnd: '#7a3dfc',
+    trackGradientStart: '#7a3dfc'
+  }
+}
+export default theme

package/build/web/VideoVolumeSlider.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+import PaletteIconMuted from '@telus-uds/palette-koodo/build/rn/icons/Muted'
+import PaletteIconUnmuted from '@telus-uds/palette-koodo/build/rn/icons/Unmuted'
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    marginLeft: 16,
+    marginRight: 16,
+    mutedIcon: PaletteIconMuted,
+    rangeBackground: 'rgba(0, 0, 0, 0)',
+    thumbBackground: '#ffffff',
+    thumbHeight: 8,
+    thumbWidth: 8,
+    trackGradientEnd: '#ffffff',
+    trackGradientStart: '#ffffff',
+    unmutedIcon: PaletteIconUnmuted
+  }
+}
+export default theme

package/build/web/WaffleGrid.js

@@ -0,0 +1,29 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  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' ] }, tokens: { rowSize: 2 } },
+    { if: { viewport: [ 'sm', 'md' ] }, tokens: { rowSize: 3 } },
+    { if: { viewport: [ 'lg', 'xl' ] }, tokens: { rowSize: 6 } }
+  ],
+  tokens: {
+    itemBorderColor: '#c9c8c8',
+    itemPadding: 16,
+    rowBorderWidth: 1,
+    rowSize: 6
+  }
+}
+export default theme

package/build/web/index.js

@@ -0,0 +1,111 @@
+export { default as ActivityIndicator } from './ActivityIndicator'
+export { default as Badge } from './Badge'
+export { default as BlockQuote } from './BlockQuote'
+export { default as Box } from './Box'
+export { default as Breadcrumbs } from './Breadcrumbs'
+export { default as Button } from './Button'
+export { default as ButtonDropdown } from './ButtonDropdown'
+export { default as ButtonGroup } from './ButtonGroup'
+export { default as ButtonGroupItem } from './ButtonGroupItem'
+export { default as Callout } from './Callout'
+export { default as Card } from './Card'
+export { default as Carousel } from './Carousel'
+export { default as CarouselTabsPanelItem } from './CarouselTabsPanelItem'
+export { default as CarouselThumbnail } from './CarouselThumbnail'
+export { default as Checkbox } from './Checkbox'
+export { default as CheckboxCard } from './CheckboxCard'
+export { default as CheckboxCardGroup } from './CheckboxCardGroup'
+export { default as CheckboxGroup } from './CheckboxGroup'
+export { default as ChevronLink } from './ChevronLink'
+export { default as ColourToggle } from './ColourToggle'
+export { default as Countdown } from './Countdown'
+export { default as DatePicker } from './DatePicker'
+export { default as Disclaimer } from './Disclaimer'
+export { default as Divider } from './Divider'
+export { default as ExpandCollapse } from './ExpandCollapse'
+export { default as ExpandCollapseControl } from './ExpandCollapseControl'
+export { default as ExpandCollapseMini } from './ExpandCollapseMini'
+export { default as ExpandCollapseMiniControl } from './ExpandCollapseMiniControl'
+export { default as ExpandCollapsePanel } from './ExpandCollapsePanel'
+export { default as Feedback } from './Feedback'
+export { default as Fieldset } from './Fieldset'
+export { default as Footnote } from './Footnote'
+export { default as FootnoteLink } from './FootnoteLink'
+export { default as HorizontalScrollButton } from './HorizontalScrollButton'
+export { default as Icon } from './Icon'
+export { default as IconButton } from './IconButton'
+export { default as Image } from './Image'
+export { default as InputLabel } from './InputLabel'
+export { default as InputSupports } from './InputSupports'
+export { default as Link } from './Link'
+export { default as List } from './List'
+export { default as Listbox } from './Listbox'
+export { default as Modal } from './Modal'
+export { default as MultiSelectFilter } from './MultiSelectFilter'
+export { default as NavigationBar } from './NavigationBar'
+export { default as Notification } from './Notification'
+export { default as OrderedList } from './OrderedList'
+export { default as Pagination } from './Pagination'
+export { default as PaginationPageButton } from './PaginationPageButton'
+export { default as PaginationSideButton } from './PaginationSideButton'
+export { default as PreviewCard } from './PreviewCard'
+export { default as PriceLockup } from './PriceLockup'
+export { default as Progress } from './Progress'
+export { default as ProgressBar } from './ProgressBar'
+export { default as QuantitySelector } from './QuantitySelector'
+export { default as QuantitySelectorSideButton } from './QuantitySelectorSideButton'
+export { default as QuickLinks } from './QuickLinks'
+export { default as QuickLinksButton } from './QuickLinksButton'
+export { default as QuickLinksCard } from './QuickLinksCard'
+export { default as QuickLinksFeature } from './QuickLinksFeature'
+export { default as QuickLinksFeatureItem } from './QuickLinksFeatureItem'
+export { default as QuickLinksList } from './QuickLinksList'
+export { default as Radio } from './Radio'
+export { default as RadioCard } from './RadioCard'
+export { default as RadioCardGroup } from './RadioCardGroup'
+export { default as RadioGroup } from './RadioGroup'
+export { default as Ribbon } from './Ribbon'
+export { default as Search } from './Search'
+export { default as SearchButton } from './SearchButton'
+export { default as Select } from './Select'
+export { default as SideNav } from './SideNav'
+export { default as SideNavItem } from './SideNavItem'
+export { default as SideNavItemsGroup } from './SideNavItemsGroup'
+export { default as Skeleton } from './Skeleton'
+export { default as SkipLink } from './SkipLink'
+export { default as Spinner } from './Spinner'
+export { default as SplashButton } from './SplashButton'
+export { default as SplashButtonWithDetails } from './SplashButtonWithDetails'
+export { default as StackView } from './StackView'
+export { default as StepTracker } from './StepTracker'
+export { default as StoryCard } from './StoryCard'
+export { default as Table } from './Table'
+export { default as Tabs } from './Tabs'
+export { default as TabsItem } from './TabsItem'
+export { default as Tags } from './Tags'
+export { default as TagsItem } from './TagsItem'
+export { default as TermsAndConditions } from './TermsAndConditions'
+export { default as Testimonial } from './Testimonial'
+export { default as TextArea } from './TextArea'
+export { default as TextInput } from './TextInput'
+export { default as Timeline } from './Timeline'
+export { default as Toast } from './Toast'
+export { default as ToggleSwitch } from './ToggleSwitch'
+export { default as ToggleSwitchGroup } from './ToggleSwitchGroup'
+export { default as Tooltip } from './Tooltip'
+export { default as TooltipButton } from './TooltipButton'
+export { default as Typography } from './Typography'
+export { default as Video } from './Video'
+export { default as VideoButton } from './VideoButton'
+export { default as VideoControlBar } from './VideoControlBar'
+export { default as VideoMenu } from './VideoMenu'
+export { default as VideoMiddleControlButton } from './VideoMiddleControlButton'
+export { default as VideoPicker } from './VideoPicker'
+export { default as VideoPickerSlider } from './VideoPickerSlider'
+export { default as VideoPickerThumbnail } from './VideoPickerThumbnail'
+export { default as VideoProgressBar } from './VideoProgressBar'
+export { default as VideoVolumeSlider } from './VideoVolumeSlider'
+export { default as WaffleGrid } from './WaffleGrid'
+export { default as spacingScale } from './spacingScale'
+export const metadata = { name: 'theme-koodo', themeTokensVersion: '2.49.0'}
+export { default } from './theme'