feat: add buttons with icons in tailwind

src/shared/util/themeColors.ts

@@ -0,0 +1,60 @@
+export const colors = {
+    ut: {
+        'burnt-orange': '#BF5700',
+        black: '#333F48',
+        orange: '#f8971f',
+        yellow: '#ffd600',
+        'light-green': '#a6cd57',
+        green: '#579d42',
+        teal: '#00a9b7',
+        blue: '#005f86',
+        gray: '#9cadb7',
+        'off-white': '#d6d2c4',
+        concrete: '#95a5a6',
+    },
+    theme: {
+        red: '#af2e2d',
+        black: '#1a2024',
+    },
+} as const;
+
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends Record<string, any> ? `${string & K}-${string & keyof T[K]}` : never;
+}[keyof T];
+
+/**
+ * A union of all colors in the theme
+ */
+export type ThemeColor = NestedKeys<typeof colors>;
+
+export const colorsFlattened = Object.entries(colors).reduce(
+    (acc, [prefix, group]) => {
+        for (const [name, hex] of Object.entries(group)) {
+            acc[`${prefix}-${name}`] = hex;
+        }
+        return acc;
+    },
+    {} as Record<ThemeColor, string>
+);
+
+const hexToRgb = (hex: string) =>
+    hex.match(/[0-9a-f]{2}/gi).map(partialHex => parseInt(partialHex, 16)) as [number, number, number];
+
+const colorsFlattenedRgb = Object.fromEntries(
+    Object.entries(colorsFlattened).map(([name, hex]) => [name, hexToRgb(hex)])
+) as Record<ThemeColor, ReturnType<typeof hexToRgb>>;
+
+/**
+ * Retrieves the hexadecimal color value by name from the theme.
+ *
+ * @param name - The name of the theme color.
+ * @returns The hexadecimal color value.
+ */
+export const getThemeColorHexByName = (name: ThemeColor): string => colorsFlattened[name];
+
+/**
+ *
+ * @param name - The name of the theme color.
+ * @returns An array of the red, green, and blue values, respectively
+ */
+export const getThemeColorRgbByName = (name: ThemeColor) => colorsFlattenedRgb[name];

src/stories/components/Button.stories.tsx

@@ -1,7 +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 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';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -16,6 +23,7 @@ const meta = {
     // More on argTypes: https://storybook.js.org/docs/api/argtypes
     args: {
         children: 'Button',
+        icon: ImagePlaceholderIcon,
     },
     argTypes: {
         children: { control: 'text' },
@@ -27,71 +35,79 @@ type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
-    args: {},
+    args: {
+        variant: 'filled',
+        color: 'ut-black',
+    },
 };
 
 export const Disabled: Story = {
     args: {
+        variant: 'filled',
+        color: 'ut-black',
         disabled: true,
     },
 };
 
 export const Grid: Story = {
     render: props => (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
-            <div style={{ display: 'flex' }}>
+            <div style={{ display: 'flex', gap: '15px' }}>
-                <Button {...props} variant='filled' className='bg-ut-black' />
+                <Button {...props} variant='filled' color='ut-black' />
-                <Button {...props} variant='outline' className='text-ut-black' />
+                <Button {...props} variant='outline' color='ut-black' />
-                <Button {...props} variant='single' className='text-ut-black' />
+                <Button {...props} variant='single' color='ut-black' />
-            </div>
-            <div style={{ display: 'flex' }}>
-                <Button {...props} variant='filled' className='bg-ut-black' useScss />
-                <Button {...props} variant='outline' className='text-ut-black' useScss />
-                <Button {...props} variant='single' className='text-ut-black' useScss />
             </div>
 
             <hr />
-            <div style={{ display: 'flex' }}>
+
-                <Button {...props} variant='filled' className='bg-ut-black' disabled />
+            <div style={{ display: 'flex', gap: '15px' }}>
-                <Button {...props} variant='outline' className='text-ut-black' disabled />
+                <Button {...props} variant='filled' color='ut-black' disabled />
-                <Button {...props} variant='single' className='text-ut-black' disabled />
+                <Button {...props} variant='outline' color='ut-black' disabled />
-            </div>
+                <Button {...props} variant='single' color='ut-black' disabled />
-            <div style={{ display: 'flex' }}>
-                <Button {...props} variant='filled' className='bg-ut-black' disabled useScss />
-                <Button {...props} variant='outline' className='text-ut-black' disabled useScss />
-                <Button {...props} variant='single' className='text-ut-black' disabled useScss />
             </div>
         </div>
     ),
 };
 
-export const Icons: Story = {
+export const PrettyColors: Story = {
-    render: props => (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <Button {...props} variant='filled' icon={ImagePlaceholderIcon} />
-            <Button {...props} variant='outline' icon={ImagePlaceholderIcon} />
-            <Button {...props} variant='single' icon={ImagePlaceholderIcon} />
-        </div>
-    ),
-};
-
-// TODO: Actually show the buttons as they appear in the design
-export const CourseButtons: Story = {
     args: {
-        children: 'Add Course',
+        children: '',
     },
+    render: props => {
+        const colorsNames = Object.keys(colorsFlattened) as (keyof typeof colorsFlattened)[];
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+                {colorsNames.map(color => (
+                    <div style={{ display: 'flex', gap: '15px' }} key={color}>
+                        <Button {...props} variant='filled' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='outline' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='single' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='filled' color={color} />
+                        <Button {...props} variant='outline' color={color} />
+                        <Button {...props} variant='single' color={color} />
+                    </div>
+                ))}
+            </div>
+        );
+    },
+};
+
+export const CourseButtons: Story = {
     render: props => (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center' }}>
-            <div style={{ display: 'flex' }}>
+            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
-                <Button {...props} variant='filled' />
+                Add Course
-                <Button {...props} variant='outline' />
+            </Button>
-                <Button {...props} variant='single' />
+            <Button {...props} variant='filled' color='theme-red' icon={RemoveIcon}>
-            </div>
+                Remove Course
-            <div style={{ display: 'flex' }}>
+            </Button>
-                <Button {...props} variant='filled' disabled />
-                <Button {...props} variant='outline' disabled />
-                <Button {...props} variant='single' disabled />
-            </div>
         </div>
     ),
     parameters: {
@@ -101,3 +117,26 @@ export const CourseButtons: Story = {
         },
     },
 };
+
+export const CourseCatalogActionButtons: Story = {
+    args: {
+        children: '',
+    },
+    render: props => (
+        <div style={{ display: 'flex', gap: '15px' }}>
+            <Button {...props} variant='filled' color='ut-burnt-orange' icon={CalendarMonthIcon} />
+            <Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
+                RateMyProf
+            </Button>
+            <Button {...props} variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+                CES
+            </Button>
+            <Button {...props} variant='outline' color='ut-yellow' icon={DescriptionIcon}>
+                Past Syllabi
+            </Button>
+            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+                Add Course
+            </Button>
+        </div>
+    ),
+};

src/views/components/common/Button/Button.tsx

@@ -1,22 +1,20 @@
 import clsx from 'clsx';
 import React from 'react';
-import styles from './Button.module.scss';
+import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
+import type IconComponent from '~icons/material-symbols';
+import Text from '../Text/Text';
 
 interface Props {
     className?: string;
     style?: React.CSSProperties;
-    variant?: 'filled' | 'outline' | 'single';
+    variant: 'filled' | 'outline' | 'single';
     onClick?: () => void;
-    icon?: React.ReactNode;
+    icon?: typeof IconComponent;
     disabled?: boolean;
     title?: string;
-    testId?: string;
+    color: ThemeColor;
-    useScss?: boolean;
 }
 
-const BUTTON_BASE_CLASS =
-    'm-2.5 h-10 w-auto flex cursor-pointer content-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 font-500 leading-normal font-sans btn-transition';
-
 /**
  * A reusable button component that follows the design system of the extension.
  * @returns
@@ -29,29 +27,49 @@ export function Button({
     icon,
     disabled,
     title,
-    testId,
+    color,
     children,
-    useScss = false,
 }: React.PropsWithChildren<Props>): JSX.Element {
+    const Icon = icon;
+    const isIconOnly = !children && !!icon;
+    const colorHex = getThemeColorHexByName(color);
+    const colorRgb = getThemeColorRgbByName(color).join(' ');
+
     return (
         <button
             style={
                 {
                     ...style,
-                    '--color-primary': '#333F48',
+                    '--color': colorHex,
-                    '--color-secondary': '#FFFFFF',
+                    '--bg-color-8': `rgba(${colorRgb} / 0.08)`,
+                    '--shadow-color-15': `rgba(${colorRgb} / 0.15)`,
+                    '--shadow-color-30': `rgba(${colorRgb} / 0.3)`,
                 } as React.CSSProperties
             }
-            data-testid={testId}
+            className={clsx(
-            className={clsx(styles.button, className, styles[type ?? 'primary'], {
+                'btn',
-                [styles.disabled]: disabled,
+                {
-            })}
+                    'disabled:(cursor-not-allowed opacity-50)': disabled,
+                    'color-white bg-[var(--color)] border-[var(--color)] hover:btn-shadow': variant === 'filled',
+                    'color-[var(--color)] bg-white border-current hover:btn-shade border border-solid':
+                        variant === 'outline',
+                    'color-[var(--color)] bg-white border-white hover:btn-shade': 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,
+                },
+                className
+            )}
             title={title}
             disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            {icon}
+            {icon && <Icon className='size-6' />}
-            {children}
+            {!isIconOnly && (
+                <Text variant='h4' className='translate-y-0.08'>
+                    {children}
+                </Text>
+            )}
         </button>
     );
 }

src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss

@@ -1,7 +1,7 @@
 @import 'src/views/styles/base.module.scss';
 
 .extensionRoot {
-    font-family: 'Inter' !important;
+    @apply font-sans;
     color: #303030;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

src/views/components/common/ExtensionRoot/ExtensionRoot.tsx

@@ -3,7 +3,6 @@ import styles from './ExtensionRoot.module.scss';
 
 import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
-import '@unocss/reset/tailwind-compat.css';
 
 interface Props {
     testId?: string;

unocss.config.ts

@@ -3,10 +3,23 @@ import presetWebFonts from '@unocss/preset-web-fonts';
 import transformerDirectives from '@unocss/transformer-directives';
 import transformerVariantGroup from '@unocss/transformer-variant-group';
 import { defineConfig } from 'unocss';
+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)',
+            },
+        ],
         [
             'ring-offset-0',
             {
@@ -16,31 +29,14 @@ 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',
     },
     theme: {
         easing: {
             'in-out-expo': 'cubic-bezier(.46, 0, .21, 1)',
             'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
         },
-        colors: {
+        colors,
-            ut: {
-                'burnt-orange': '#BF5700',
-                black: '#333F48',
-                orange: '#f8971f',
-                yellow: '#ffd600',
-                'light-green': '#a6cd57',
-                green: '#579d42',
-                teal: '#00a9b7',
-                blue: '#005f86',
-                gray: '#9cadb7',
-                'off-white': '#d6d2c4',
-                concrete: '#95a5a6',
-            },
-            theme: {
-                red: '#af2e2d',
-                black: '#1a2024',
-            },
-        },
     },
 
     presets: [