🚀 Alpha Plugin Contest 1: Build a Reusable Web Component!

[Malavika]

Challenge: Create a pluggable, reusable web component to mark rows as “Important” in a data table.
Tech Stack: Must be built using LitElement for seamless integration.

Features Required:
A star icon to mark rows as “Important” (yellow star) or “Not Important” (grey star).
Instant updates on click.
The row click event should be mappable to custom code on Alpha.
Follows Alpha’s design tokens, typography, and spacing.

Be the Fastest & Win!
The first valid submission WINS the competition!

Important Dates:
Register by: 28th March 2025
Submission Deadline: 28th March 2025 - 18th April 2025

REGISTER TO ENTER THE COMPETITION: Microsoft Forms

Submit Now & Take the Lead!

[Simphiwe]

Hi

Where can we find documentation for Alpha Design Compliance.
So, we can Adhere to Alpha’s established design tokens, typography, and spacing guidelines.

Thank you. Looking forward to your response.

[Eldho]

@Simphiwe thanks but please register and @Prajwal will help you with details

[Simphiwe]

Okay will do. Thank you

[Prajwal]

@Eldho This looks like a UI/UX-related query. The UI/UX team should help.

[vaibhav]

Hey everyone, take a look at the CSS file below. You can use the classes and variables from it in your element styles.

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v151/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2)
        format('woff2');
}

:root {
    --alpha-font-family: 'IBM Plex Sans', sans-serif;
    --alpha-primary-color: #da7f52;
    --alpha-secondary-color: '';
    --alpha-font-color: #101828;
    --alpha-header-color: '';
    --alpha-surface-color: '';
    --alpha-background-surface-color: #ffffff;
    --alpha-success-color: '';
    --alpha-alert-color: '';
    --alpha-error-color: #be2626;
    --alpha-label-color: #425b80;
    --alpha-label-background: white;

    --alpha-small-regular-font-size: 12px;
    --alpha-small-regular-font-style: normal;
    --alpha-small-regular-font-letter-spacing: 0px;
    --alpha-small-regular-font-weight: 400;
    --alpha-small-regular-font-color: #425b80;

    --alpha-small-medium-font-size: 12px;
    --alpha-small-medium-font-style: normal;
    --alpha-small-medium-font-letter-spacing: 0px;
    --alpha-small-medium-font-weight: 500;
    --alpha-small-medium-font-color: #425b80;

    --alpha-small-semi-bold-font-size: 12px;
    --alpha-small-semi-bold-font-style: normal;
    --alpha-small-semi-bold-font-letter-spacing: 0px;
    --alpha-small-semi-bold-font-weight: 600;
    --alpha-small-semi-bold-font-color: #425b80;

    --alpha-small-bold-font-size: 12px;
    --alpha-small-bold-font-style: normal;
    --alpha-small-bold-font-letter-spacing: 0px;
    --alpha-small-bold-font-weight: 700;
    --alpha-small-bold-font-color: #425b80;

    --alpha-medium-regular-font-size: 14px;
    --alpha-medium-regular-font-style: normal;
    --alpha-medium-regular-font-letter-spacing: 0px;
    --alpha-medium-regular-font-weight: 400;
    --alpha-medium-regular-font-color: #425b80;

    --alpha-medium-medium-font-size: 14px;
    --alpha-medium-medium-font-style: normal;
    --alpha-medium-medium-font-letter-spacing: 0px;
    --alpha-medium-medium-font-weight: 500;
    --alpha-medium-medium-font-color: #425b80;

    --alpha-medium-semi-bold-font-size: 14px;
    --alpha-medium-semi-bold-font-style: normal;
    --alpha-medium-semi-bold-font-letter-spacing: 0px;
    --alpha-medium-semi-bold-font-weight: 600;
    --alpha-medium-semi-bold-font-color: #425b80;

    --alpha-medium-bold-font-size: 14px;
    --alpha-medium-bold-font-style: normal;
    --alpha-medium-bold-font-letter-spacing: 0px;
    --alpha-medium-bold-font-weight: 700;
    --alpha-medium-bold-font-color: #425b80;

    --alpha-large-regular-font-size: 16px;
    --alpha-large-regular-font-style: normal;
    --alpha-large-regular-font-letter-spacing: 0px;
    --alpha-large-regular-font-weight: 400;
    --alpha-large-regular-font-color: #425b80;

    --alpha-large-medium-font-size: 16px;
    --alpha-large-medium-font-style: normal;
    --alpha-large-medium-font-letter-spacing: 0px;
    --alpha-large-medium-font-weight: 500;
    --alpha-large-medium-font-color: #425b80;

    --alpha-large-semi-bold-font-size: 16px;
    --alpha-large-semi-bold-font-style: normal;
    --alpha-large-semi-bold-font-letter-spacing: 0px;
    --alpha-large-semi-bold-font-weight: 600;
    --alpha-large-semi-bold-font-color: #425b80;

    --alpha-large-bold-font-size: 16px;
    --alpha-large-bold-font-style: normal;
    --alpha-large-bold-font-letter-spacing: 0px;
    --alpha-large-bold-font-weight: 700;
    --alpha-large-bold-font-color: #425b80;

    --alpha-h6-regular-font-size: 18px;
    --alpha-h6-regular-font-style: normal;
    --alpha-h6-regular-font-letter-spacing: 0px;
    --alpha-h6-regular-font-weight: 400;
    --alpha-h6-regular-font-color: #425b80;

    --alpha-h6-medium-font-size: 18px;
    --alpha-h6-medium-font-style: normal;
    --alpha-h6-medium-font-letter-spacing: 0px;
    --alpha-h6-medium-font-weight: 500;
    --alpha-h6-medium-font-color: #425b80;

    --alpha-h6-semi-bold-font-size: 18px;
    --alpha-h6-semi-bold-font-style: normal;
    --alpha-h6-semi-bold-font-letter-spacing: 0px;
    --alpha-h6-semi-bold-font-weight: 600;
    --alpha-h6-semi-bold-font-color: #425b80;

    --alpha-h6-bold-font-size: 18px;
    --alpha-h6-bold-font-style: normal;
    --alpha-h6-bold-font-letter-spacing: 0px;
    --alpha-h6-bold-font-weight: 700;
    --alpha-h6-bold-font-color: #425b80;

    --alpha-h5-bold-font-size: 20px;
    --alpha-h5-bold-font-style: normal;
    --alpha-h5-bold-font-letter-spacing: 0px;
    --alpha-h5-bold-font-weight: 700;
    --alpha-h5-bold-font-color: #425b80;

    --alpha-h4-bold-font-size: 28px;
    --alpha-h4-bold-font-style: normal;
    --alpha-h4-bold-font-letter-spacing: 0px;
    --alpha-h4-bold-font-weight: 700;
    --alpha-h4-bold-font-color: #425b80;

    --alpha-h3-bold-font-size: 32px;
    --alpha-h3-bold-font-style: normal;
    --alpha-h3-bold-font-letter-spacing: 0px;
    --alpha-h3-bold-font-weight: 700;
    --alpha-h3-bold-font-color: #425b80;

    --alpha-h2-bold-font-size: 42px;
    --alpha-h2-bold-font-style: normal;
    --alpha-h2-bold-font-letter-spacing: 0px;
    --alpha-h2-bold-font-weight: 700;
    --alpha-h2-bold-font-color: #425b80;

    --alpha-h1-bold-font-size: 56px;
    --alpha-h1-bold-font-style: normal;
    --alpha-h1-bold-font-letter-spacing: 0px;
    --alpha-h1-bold-font-weight: 700;
    --alpha-h1-bold-font-color: #425b80;

    --alpha-section-background-color: #f2f4f8;
    --alpha-section-border-color: #ffffff;
    --alpha-section-padding: 12px;

    --alpha-panel-border-color: #dde1e6;
    --alpha-panel-border-radius: 10px;
    --alpha-panel-padding: 12px;
    --alpha-panel-content-height: 10rem;

    --alpha-tootip-background-color: black;
    --alpha-tootip-font-size: 12px;
    --alpha-tootip-font-color: white;
    --alpha-tootip-font-family: 'IBM Plex Sans';
}

.alpha-primary-color {
    color: var(--alpha-primary-color) !important;
}

.alpha-secondary-color {
    color: var(--alpha-secondary-color) !important;
}

.alpha-font-color {
    color: var(--alpha-font-color) !important;
}

.alpha-header-color {
    color: var(--alpha-header-color) !important;
}

.alpha-surface-color {
    color: var(--alpha-surface-color) !important;
}

.alpha-background-color {
    color: var(--alpha-background-surface-color) !important;
}

.alpha-success-color {
    color: var(--alpha-success-color) !important;
}

.alpha-alert-color {
    color: var(--alpha-alert-color) !important;
}

.alpha-error-color {
    color: var(--alpha-error-color) !important;
}

.alpha-small-font-regular {
    font-size: var(--alpha-small-regular-font-size) !important;
    font-style: var(--alpha-small-regular-font-style) !important;
    letter-spacing: var(--alpha-small-regular-font-letter-spacing) !important;
    font-weight: var(--alpha-small-regular-font-weight) !important;
    color: var(--alpha-small-regular-font-color) !important;
}

.alpha-small-font-medium {
    font-size: var(--alpha-small-medium-font-size) !important;
    font-style: var(--alpha-small-medium-font-style) !important;
    letter-spacing: var(--alpha-small-medium-font-letter-spacing) !important;
    font-weight: var(--alpha-small-medium-font-weight) !important;
    color: var(--alpha-small-medium-font-color) !important;
}

.alpha-small-font-semi-bold {
    font-size: var(--alpha-small-semi-bold-font-size) !important;
    font-style: var(--alpha-small-semi-bold-font-style) !important;
    letter-spacing: var(--alpha-small-semi-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-small-semi-bold-font-weight) !important;
    color: var(--alpha-small-semi-bold-font-color) !important;
}

.alpha-small-font-bold {
    font-size: var(--alpha-small-bold-font-size) !important;
    font-style: var(--alpha-small-bold-font-style) !important;
    letter-spacing: var(--alpha-small-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-small-bold-font-weight) !important;
    color: var(--alpha-small-bold-font-color) !important;
}

.alpha-medium-font-regular {
    font-size: var(--alpha-medium-regular-font-size) !important;
    font-style: var(--alpha-medium-regular-font-style) !important;
    letter-spacing: var(--alpha-medium-regular-font-letter-spacing) !important;
    font-weight: var(--alpha-medium-regular-font-weight) !important;
    color: var(--alpha-medium-regular-font-color) !important;
}

.alpha-medium-font-medium {
    font-size: var(--alpha-medium-medium-font-size) !important;
    font-style: var(--alpha-medium-medium-font-style) !important;
    letter-spacing: var(--alpha-medium-medium-font-letter-spacing) !important;
    font-weight: var(--alpha-medium-medium-font-weight) !important;
    color: var(--alpha-medium-medium-font-color) !important;
}

.alpha-medium-font-semi-bold {
    font-size: var(--alpha-medium-semi-bold-font-size) !important;
    font-style: var(--alpha-medium-semi-bold-font-style) !important;
    letter-spacing: var(--alpha-medium-semi-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-medium-semi-bold-font-weight) !important;
    color: var(--alpha-medium-semi-bold-font-color) !important;
}

.alpha-medium-font-bold {
    font-size: var(--alpha-medium-bold-font-size) !important;
    font-style: var(--alpha-medium-bold-font-style) !important;
    letter-spacing: var(--alpha-medium-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-medium-bold-font-weight) !important;
    color: var(--alpha-medium-bold-font-color) !important;
}

.alpha-large-font-regular {
    font-size: var(--alpha-large-regular-font-size) !important;
    font-style: var(--alpha-large-regular-font-style) !important;
    letter-spacing: var(--alpha-large-regular-font-letter-spacing) !important;
    font-weight: var(--alpha-large-regular-font-weight) !important;
    color: var(--alpha-large-regular-font-color) !important;
}

.alpha-large-font-medium {
    font-size: var(--alpha-large-medium-font-size) !important;
    font-style: var(--alpha-large-medium-font-style) !important;
    letter-spacing: var(--alpha-large-medium-font-letter-spacing) !important;
    font-weight: var(--alpha-large-medium-font-weight) !important;
    color: var(--alpha-large-medium-font-color) !important;
}

.alpha-large-font-semi-bold {
    font-size: var(--alpha-large-semi-bold-font-size) !important;
    font-style: var(--alpha-large-semi-bold-font-style) !important;
    letter-spacing: var(--alpha-large-semi-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-large-semi-bold-font-weight) !important;
    color: var(--alpha-large-semi-bold-font-color) !important;
}

.alpha-large-font-bold {
    font-size: var(--alpha-large-bold-font-size) !important;
    font-style: var(--alpha-large-bold-font-style) !important;
    letter-spacing: var(--alpha-large-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-large-bold-font-weight) !important;
    color: var(--alpha-large-bold-font-color) !important;
}

.alpha-h6-font-regular {
    font-size: var(--alpha-h6-regular-font-size) !important;
    font-style: var(--alpha-h6-regular-font-style) !important;
    letter-spacing: var(--alpha-h6-regular-font-letter-spacing) !important;
    font-weight: var(--alpha-h6-regular-font-weight) !important;
    color: var(--alpha-h6-regular-font-color) !important;
}

.alpha-h6-font-medium {
    font-size: var(--alpha-h6-medium-font-size) !important;
    font-style: var(--alpha-h6-medium-font-style) !important;
    letter-spacing: var(--alpha-h6-medium-font-letter-spacing) !important;
    font-weight: var(--alpha-h6-medium-font-weight) !important;
    color: var(--alpha-h6-medium-font-color) !important;
}

.alpha-h6-font-semi-bold {
    font-size: var(--alpha-h6-semi-bold-font-size) !important;
    font-style: var(--alpha-h6-semi-bold-font-style) !important;
    letter-spacing: var(--alpha-h6-semi-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-h6-semi-bold-font-weight) !important;
    color: var(--alpha-h6-semi-bold-font-color) !important;
}

.alpha-h6-font-bold {
    font-size: var(--alpha-h6-bold-font-size) !important;
    font-style: var(--alpha-h6-bold-font-style) !important;
    letter-spacing: var(--alpha-h6-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-h6-bold-font-weight) !important;
    color: var(--alpha-h6-bold-font-color) !important;
}

.alpha-h5-font-bold {
    font-size: var(--alpha-h5-bold-font-size) !important;
    font-style: var(--alpha-h5-bold-font-style) !important;
    letter-spacing: var(--alpha-h5-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-h5-bold-font-weight) !important;
    color: var(--alpha-h5-bold-font-color) !important;
}

.alpha-h4-font-bold {
    font-size: var(--alpha-h4-bold-font-size) !important;
    font-style: var(--alpha-h4-bold-font-style) !important;
    letter-spacing: var(--alpha-h4-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-h4-bold-font-weight) !important;
    color: var(--alpha-h4-bold-font-color) !important;
}

.alpha-h3-font-bold {
    font-size: var(--alpha-h3-bold-font-size) !important;
    font-style: var(--alpha-h3-bold-font-style) !important;
    letter-spacing: var(--alpha-h3-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-h3-bold-font-weight) !important;
    color: var(--alpha-h3-bold-font-color) !important;
}

.alpha-h2-font-bold {
    font-size: var(--alpha-h2-bold-font-size) !important;
    font-style: var(--alpha-h2-bold-font-style) !important;
    letter-spacing: var(--alpha-h2-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-h2-bold-font-weight) !important;
    color: var(--alpha-h2-bold-font-color) !important;
}

.alpha-h1-font-bold {
    font-size: var(--alpha-h1-bold-font-size) !important;
    font-style: var(--alpha-h1-bold-font-style) !important;
    letter-spacing: var(--alpha-h1-bold-font-letter-spacing) !important;
    font-weight: var(--alpha-h1-bold-font-weight) !important;
    color: var(--alpha-h1-bold-font-color) !important;
}

[Eldho]

@Simphiwe please take look

[Simphiwe]

Hi @Eldho

I have completed the task, Please see the link below.

star-table.zip

[Malavika]

Hi Everyone. The Alpha Plugin Contest is now closed! Thank you to everyone who participated. We were thrilled with the number of applications and will be announcing the winners soon. Don’t worry if you missed this one; we have more exciting competitions coming up!