From 633c9ba59358a401e3a9050dfff68f38bf84f849 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Wed, 14 Feb 2024 16:03:18 -0600 Subject: [PATCH 1/3] fix unocss theme color namings --- src/shared/util/themeColors.ts | 6 +++--- src/stories/components/Button.stories.tsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/shared/util/themeColors.ts b/src/shared/util/themeColors.ts index 3e939c57..f52cba4c 100644 --- a/src/shared/util/themeColors.ts +++ b/src/shared/util/themeColors.ts @@ -1,15 +1,15 @@ export const colors = { ut: { - 'burnt-orange': '#BF5700', + burntorange: '#BF5700', black: '#333F48', orange: '#f8971f', yellow: '#ffd600', - 'light-green': '#a6cd57', + lightgreen: '#a6cd57', green: '#579d42', teal: '#00a9b7', blue: '#005f86', gray: '#9cadb7', - 'off-white': '#d6d2c4', + offwhite: '#d6d2c4', concrete: '#95a5a6', }, theme: { diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx index f6de21a2..e62093ac 100644 --- a/src/stories/components/Button.stories.tsx +++ b/src/stories/components/Button.stories.tsx @@ -1,14 +1,14 @@ -import { Button } from 'src/views/components/common/Button/Button'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { colorsFlattened } from 'src/shared/util/themeColors'; -import ImagePlaceholderIcon from '~icons/material-symbols/image'; +import { Button } from 'src/views/components/common/Button/Button'; import AddIcon from '~icons/material-symbols/add'; -import RemoveIcon from '~icons/material-symbols/remove'; import CalendarMonthIcon from '~icons/material-symbols/calendar-month'; -import ReviewsIcon from '~icons/material-symbols/reviews'; -import HappyFaceIcon from '~icons/material-symbols/mood'; import DescriptionIcon from '~icons/material-symbols/description'; +import ImagePlaceholderIcon from '~icons/material-symbols/image'; +import HappyFaceIcon from '~icons/material-symbols/mood'; +import RemoveIcon from '~icons/material-symbols/remove'; +import ReviewsIcon from '~icons/material-symbols/reviews'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { @@ -128,7 +128,7 @@ export const CourseCatalogActionButtons: Story = { }, render: props => (
- From 3e4cec43d14216a46998d322267af9f644821d96 Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Wed, 14 Feb 2024 16:03:33 -0600 Subject: [PATCH 2/3] update button stylings --- src/views/components/common/Button/Button.tsx | 18 +++++++----------- unocss.config.ts | 15 +++------------ 2 files changed, 10 insertions(+), 23 deletions(-) diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx index d2be0bd3..7a126e63 100644 --- a/src/views/components/common/Button/Button.tsx +++ b/src/views/components/common/Button/Button.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import React from 'react'; -import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors'; import type IconComponent from '~icons/material-symbols'; +import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors'; import Text from '../Text/Text'; interface Props { @@ -40,21 +40,17 @@ export function Button({ style={ { ...style, - '--color': colorHex, - '--bg-color-8': `rgba(${colorRgb} / 0.08)`, - '--shadow-color-15': `rgba(${colorRgb} / 0.15)`, - '--shadow-color-30': `rgba(${colorRgb} / 0.3)`, + color: colorHex, + backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`, } as React.CSSProperties } className={clsx( 'btn', { - 'disabled:(cursor-not-allowed opacity-50)': disabled, - 'color-white bg-[var(--color)] border-[var(--color)] hover:enabled:btn-shadow': + 'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20': variant === 'filled', - 'color-[var(--color)] bg-white border-current hover:enabled:btn-shade border border-solid': - variant === 'outline', - 'color-[var(--color)] bg-white border-white hover:enabled:btn-shade': variant === 'single', // settings is the only "single" + 'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline', + 'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'single', // settings is the only "single" 'px-2 py-1.25': isIconOnly && variant !== 'outline', 'px-1.75 py-1.25': isIconOnly && variant === 'outline', 'px-3.75': variant === 'outline' && !isIconOnly, @@ -65,7 +61,7 @@ export function Button({ disabled={disabled} onClick={disabled ? undefined : onClick} > - {icon && } + {icon && } {!isIconOnly && ( {children} diff --git a/unocss.config.ts b/unocss.config.ts index 605cad07..4cf5f36f 100644 --- a/unocss.config.ts +++ b/unocss.config.ts @@ -7,18 +7,9 @@ import { colors } from './src/shared/util/themeColors'; export default defineConfig({ rules: [ - ['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }], [ - 'btn-shadow', - { - 'box-shadow': '0px 1px 3px 1px var(--shadow-color-15), 0px 1px 2px 0px var(--shadow-color-30);', - }, - ], - [ - 'btn-shade', - { - 'background-color': 'var(--bg-color-8)', - }, + 'btn-transition', + { transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 100ms, transform 50ms' }, ], [ 'ring-offset-0', @@ -29,7 +20,7 @@ export default defineConfig({ ], shortcuts: { focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4', - btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition', + btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition btn-transition disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 focusable', }, theme: { easing: { From 27fdd9c5595331e737af58ec2d5337b4679264fe Mon Sep 17 00:00:00 2001 From: Lukas Zenick Date: Sat, 17 Feb 2024 12:04:41 -0600 Subject: [PATCH 3/3] fix undefined color case --- src/views/components/common/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx index d2be0bd3..39e71d13 100644 --- a/src/views/components/common/Button/Button.tsx +++ b/src/views/components/common/Button/Button.tsx @@ -33,7 +33,7 @@ export function Button({ const Icon = icon; const isIconOnly = !children && !!icon; const colorHex = getThemeColorHexByName(color); - const colorRgb = getThemeColorRgbByName(color).join(' '); + const colorRgb = getThemeColorRgbByName(color)?.join(' '); return (