@telus-uds/theme-koodo 0.0.2-prerelease.0 → 0.1.0-prerelease.0

package/src/components/Typography.js

@@ -1,163 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import { getTypographySchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import { appearances } from '@telus-uds/system-constants'
-
-const Typography = {
-  appearances: {
-    weight: {
-      description:
-        'Sets the font weight, default is regular 400 weight. Does not change accessibility properties.',
-      values: ['semibold', 'bold'],
-      type: 'variant'
-    },
-    size: {
-      values: ['small', 'large', 'h1', 'h2', 'h3', 'h4', 'display'],
-      type: 'variant'
-    },
-    colour: {
-      // No docs on this in KDS but some non-interactive textual KDS components have colours e.g. red in PageTitle
-      values: ['red'],
-      type: 'variant'
-    },
-    inverse: {
-      description: 'Styles the link white for use on dark backgrounds.',
-      values: [true],
-      type: 'variant'
-    },
-    viewport: appearances.viewport
-  },
-  tokens: {
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    color: palette.color.black,
-    lineHeight: palette.lineHeight.multiply150,
-    textTransform: 'none',
-    fontName: Object.keys(palette.font)[0],
-    fontScaleCap: palette.fontSize.size64
-  },
-  rules: [
-    /**
-     * Font weight variants
-     */
-    {
-      if: { weight: 'semibold' },
-      tokens: {
-        fontWeight: '600'
-      }
-    },
-    {
-      if: { weight: 'bold' },
-      tokens: {
-        fontWeight: '700'
-      }
-    },
-
-    /**
-     * Body text size variants
-     */
-    {
-      if: { size: 'large' },
-      tokens: {
-        fontSize: palette.fontSize.size20,
-        lineHeight: palette.lineHeight.multiply160
-      }
-    },
-    {
-      if: { size: 'small' },
-      tokens: {
-        fontSize: palette.fontSize.size14,
-        lineHeight: palette.lineHeight.multiply140
-      }
-    },
-
-    /**
-     * Heading size variants
-     */
-    {
-      if: { size: 'display' },
-      tokens: {
-        fontSize: palette.fontSize.size48,
-        fontWeight: '700',
-        lineHeight: palette.lineHeight.multiply120
-      }
-    },
-    {
-      if: { size: 'display', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: palette.fontSize.size64,
-        lineHeight: palette.lineHeight.multiply110
-      }
-    },
-    {
-      if: { size: 'h1' },
-      tokens: {
-        fontSize: palette.fontSize.size44,
-        fontWeight: '700',
-        lineHeight: palette.lineHeight.multiply120
-      }
-    },
-    {
-      if: { size: 'h1', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: palette.fontSize.size40,
-        lineHeight: palette.lineHeight.multiply110
-      }
-    },
-    {
-      if: { size: 'h2' },
-      tokens: {
-        fontSize: palette.fontSize.size28,
-        color: palette.color.black,
-        fontWeight: '700',
-        lineHeight: palette.lineHeight.multiply130
-      }
-    },
-    {
-      if: { size: 'h2', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: palette.fontSize.size28
-      }
-    },
-    {
-      if: { size: 'h3' },
-      tokens: {
-        fontSize: palette.fontSize.size20,
-        fontWeight: '700',
-        lineHeight: palette.lineHeight.multiply140
-      }
-    },
-    {
-      if: { size: 'h3', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: palette.fontSize.size24,
-        lineHeight: palette.lineHeight.multiply130
-      }
-    },
-    {
-      if: { size: 'h4' },
-      tokens: {
-        fontSize: palette.fontSize.size16,
-        fontWeight: '700',
-        lineHeight: palette.lineHeight.multiply150
-      }
-    },
-    {
-      if: { inverse: true },
-      tokens: {
-        color: palette.color.white
-      }
-    },
-    {
-      if: { colour: 'red' },
-      tokens: {
-        color: palette.color.trinidad
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Typography, getTypographySchema(palette))
-
-export default Typography

package/src/components/index.js

@@ -1,49 +0,0 @@
-import ActivityIndicator from './ActivityIndicator'
-import Box from './Box'
-import Button from './Button'
-import ButtonGroup from './ButtonGroup'
-import Card from './Card'
-import Divider from './Divider'
-import ExpandCollapse from './ExpandCollapse'
-import ExpandCollapseControl from './ExpandCollapseControl'
-import ExpandCollapsePanel from './ExpandCollapsePanel'
-import Feedback from './Feedback'
-import Icon from './Icon'
-import InputLabel from './InputLabel'
-import Link from './Link'
-import TextInput from './TextInput'
-import ToggleSwitch from './ToggleSwitch'
-import Typography from './Typography'
-import SideNav from './SideNav'
-import SideNavItem from './SideNavItem'
-import SideNavItemsGroup from './SideNavItemsGroup'
-import Pagination from './Pagination'
-import PaginationPageButton from './PaginationPageButton'
-import PaginationSideButton from './PaginationSideButton'
-import spacingScale from './spacingScale'
-
-export default {
-  ActivityIndicator,
-  Box,
-  Button,
-  ButtonGroup,
-  Card,
-  Divider,
-  ExpandCollapse,
-  ExpandCollapseControl,
-  ExpandCollapsePanel,
-  Feedback,
-  Icon,
-  InputLabel,
-  Link,
-  Pagination,
-  PaginationPageButton,
-  PaginationSideButton,
-  SideNav,
-  SideNavItem,
-  SideNavItemsGroup,
-  TextInput,
-  ToggleSwitch,
-  Typography,
-  spacingScale
-}

package/src/components/spacingScale.js

@@ -1,46 +0,0 @@
-import {
-  getSpacingScaleSchema,
-  validateComponentTheme,
-  spacingScaleAppearances
-} from '@telus-uds/tools-theme'
-import palette from '@telus-uds/palette-koodo'
-
-// TODO: confirm that these values are right for Koodo going forward
-// They're taken from original Box implementation which appears to be based on Allium values.
-
-const spacingScale = {
-  appearances: {
-    space: spacingScaleAppearances.space,
-    viewport: spacingScaleAppearances.viewport
-  },
-  // Largest spacings first, so they apply any time space >= highest index'
-  tokens: { size: palette.size.size96 },
-  rules: [
-    { if: { viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size120 } },
-
-    { if: { space: 10 }, tokens: { size: palette.size.size80 } },
-    { if: { space: 9 }, tokens: { size: palette.size.size64 } },
-    { if: { space: 8 }, tokens: { size: palette.size.size48 } },
-    { if: { space: 7 }, tokens: { size: palette.size.size40 } },
-    { if: { space: 6 }, tokens: { size: palette.size.size36 } },
-    { if: { space: 5 }, tokens: { size: palette.size.size32 } },
-    { if: { space: 4 }, tokens: { size: palette.size.size24 } },
-    { if: { space: 3 }, tokens: { size: palette.size.size16 } },
-    { if: { space: 2 }, tokens: { size: palette.size.size8 } },
-    { if: { space: 1 }, tokens: { size: palette.size.size4 } },
-
-    { if: { space: 10, viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size120 } },
-    { if: { space: 9, viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size96 } },
-    { if: { space: 8, viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size72 } },
-    { if: { space: 7, viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size64 } },
-
-    // Zero spacing last; overrides all other rules when space === 0
-    { if: { space: 0 }, tokens: { size: palette.size.size0 } }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(spacingScale, getSpacingScaleSchema(palette), 'spacingScale')
-
-export default spacingScale

package/src/index.js

@@ -1,17 +0,0 @@
-import packageJson from '../package.json'
-import components from './components'
-
-// TODO: replace this with theme build tooling and schema checks as part of
-// https://github.com/telus/universal-design-system/issues/92
-const metadata = {
-  name: 'koodo',
-  package: packageJson.name,
-  version: packageJson.version
-}
-
-const koodoTheme = {
-  metadata,
-  components
-}
-
-export default koodoTheme