SWAMPy

✎ CARVE FLESH

EDITING: style.js

/*
 * Copyright (C) 2023 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import {getThemeVars} from '../../getThemeVars'

export default function buildStyle() {
  /*
   * If the theme variables to be used when generating the styles below
   * are dependent on the actual theme in use, you can also pull out the
   * `key` property from the return from `getThemeVars()` and do a bit of
   * if or switch statement logic to get the result you want.
   */
  const {variables, key} = getThemeVars()

let themeAdditionalStyles = {}
  switch (key) {
    case 'canvas':
      themeAdditionalStyles = {
        groupColor: variables['ic-brand-primary'],
        titleColor: variables['ic-brand-primary'],
      }
      break
    case 'canvas-a11y':
    case 'modern-a11y':
      themeAdditionalStyles = {
        heroTextDecoration: 'underline',
        heroTextDecorationHover: 'none',
        titleColor: variables.colors.licorice,
      }
      break
  }

const classNames = {
    root: 'Grouping-styles__root',
    title: 'Grouping-styles__title',
    hero: 'Grouping-styles__hero',
    groupingName: 'Grouping-styles__groupingName',
    overlay: 'Grouping-styles__overlay',
    heroHover: 'Grouping-styles__heroHover',
    withImage: 'Grouping-styles__withImage',
    small: 'Grouping-styles__small',
    medium: 'Grouping-styles__medium',
    items: 'Grouping-styles__items',
  }

const theme = {
    fontFamily: variables.typography.fontFamily,
    lineHeight: variables.typography.lineHeightCondensed,
    margin: `${variables.spacing.medium} 0 0 0`,

groupColor: variables.colors.brand,

borderTopWidth: variables.borders.widthSmall,
    borderTopWidthTablet: variables.borders.widthMedium,

heroMinHeight: '7rem',
    heroWidth: '12rem',
    heroWidthLarge: '14rem',
    heroPadding: '0.0625rem',
    heroColor: variables.colors.brand,
    heroBorderRadius: variables.borders.radiusMedium,

overlayOpacity: 0.75,

titleFontSize: variables.typography.fontSizeXSmall,
    titleFontSizeTablet: '0.875rem',
    titleFontWeight: variables.typography.fontWeightBold,
    titleLetterSpacing: '0.0625rem',
    titleBackground: variables.colors.white,
    titleTextTransform: 'uppercase',
    titlePadding: `${variables.spacing.xxSmall} ${variables.spacing.xSmall}`,
    titleOverflowGradientHeight: variables.spacing.xxSmall,
    titleTextDecoration: 'none',
    titleTextDecorationHover: 'underline',
    titleColor: variables.colors.brand,
    ...themeAdditionalStyles,
    ...variables.media,
  }

return {css, classNames, theme}
}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📁 __tests__/	DIR	—	2023-09-24 03:39
📄 index.js	JS	10.3 KB	2023-09-24 03:39	EDIT
📄 style.js	JS	6.5 KB	2023-09-24 03:39	EDIT