Skip to content

[C-3176] Update harmony css variables and import harmony styles into web and embed #6240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kyle-Shanks merged 1 commit into from
Oct 5, 2023
Merged

[C-3176] Update harmony css variables and import harmony styles into web and embed #6240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/embed/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@import '~@audius/stems/dist/stems.css';
@import '~@audius/harmony/dist/harmony.css';
10 changes: 8 additions & 2 deletions packages/harmony/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
// This file is used to configure all stories
import 'assets/styles/main.css'
import 'react-perfect-scrollbar/dist/css/styles.css'
import 'assets/styles/reset.css'
import 'assets/fonts/avenir.css'
import 'assets/styles/fonts.css'
import 'assets/styles/spacing.css'
import 'assets/styles/colors.css'
import 'assets/styles/tokens.css'
import 'assets/styles/border-radius.css'
import 'assets/styles/shadows.css'

// Default to docs view
export const parameters = {
Expand Down
11 changes: 10 additions & 1 deletion packages/harmony/rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,16 @@ export default {
postcssCustomProperties({
// Preserve var names so they can be overridden
preserve: true,
importFrom: ['src/assets/styles/main.css']
importFrom: [
'src/assets/styles/reset.css',
'src/assets/fonts/avenir.css',
'src/assets/styles/fonts.css',
'src/assets/styles/spacing.css',
'src/assets/styles/colors.css',
'src/assets/styles/tokens.css',
'src/assets/styles/border-radius.css',
'src/assets/styles/shadows.css'
]
})
],
minimize: true,
Expand Down
12 changes: 6 additions & 6 deletions packages/harmony/src/assets/fonts/avenir.css
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 6 additions & 7 deletions packages/harmony/src/assets/styles/border-radius.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
/**
* Audius Border-Radius Options
*
*/
:root,
root {
--border-radius-xs: 2px;
--border-radius-s: 4px;
--border-radius-m: 8px;
--border-radius-l: 12px;
--border-radius-xl: 16px;
--border-radius-2xl: 320px;
--harmony-border-radius-xs: 2px;
--harmony-border-radius-s: 4px;
--harmony-border-radius-m: 8px;
--harmony-border-radius-l: 12px;
--harmony-border-radius-xl: 16px;
--harmony-border-radius-2xl: 320px;
}
284 changes: 142 additions & 142 deletions packages/harmony/src/assets/styles/colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,188 +5,188 @@
/* Theme Color Definitions */
:root {
/* Static Colors */
--static-white: #FFFFFF;
--static-primary: #CC0FE0;
--harmony-static-white: #FFFFFF;
--harmony-static-primary: #CC0FE0;

/* Default Theme (Day Theme) */
/* Primary Colors */
--primary: #CC0FE0;
--p-100: #D63FE6;
--p-200: #D127E3;
--p-300: #CC0FE0;
--p-400: #B80ECA;
--p-500: #A30CB3;
--harmony-primary: #CC0FE0;
--harmony-p-100: #D63FE6;
--harmony-p-200: #D127E3;
--harmony-p-300: #CC0FE0;
--harmony-p-400: #B80ECA;
--harmony-p-500: #A30CB3;

/* Secondary Colors */
--secondary: #7E1BCC;
--s-100: #9849D6;
--s-200: #8B32D1;
--s-300: #7E1BCC;
--s-400: #7118B8;
--s-500: #6516A3;
--harmony-secondary: #7E1BCC;
--harmony-s-100: #9849D6;
--harmony-s-200: #8B32D1;
--harmony-s-300: #7E1BCC;
--harmony-s-400: #7118B8;
--harmony-s-500: #6516A3;

/* Neutral Colors */
--neutral: #858199;
--n-25: #FCFCFC;
--n-50: #F7F7F9;
--n-100: #F2F2F4;
--n-150: #E7E6EB;
--n-200: #DAD9E0;
--n-300: #CECDD6;
--n-400: #C2C0CC;
--n-500: #B6B3C2;
--n-600: #AAA7B8;
--n-700: #9D9AAD;
--n-800: #858199;
--n-900: #78748A;
--n-950: #6A677A;
--harmony-neutral: #858199;
--harmony-n-25: #FCFCFC;
--harmony-n-50: #F7F7F9;
--harmony-n-100: #F2F2F4;
--harmony-n-150: #E7E6EB;
--harmony-n-200: #DAD9E0;
--harmony-n-300: #CECDD6;
--harmony-n-400: #C2C0CC;
--harmony-n-500: #B6B3C2;
--harmony-n-600: #AAA7B8;
--harmony-n-700: #9D9AAD;
--harmony-n-800: #858199;
--harmony-n-900: #78748A;
--harmony-n-950: #6A677A;

/* Special Colors */
--white: #FFFFFF;
--background: #F3F0F7;
--blue: #1BA1F1;
--orange: #FF9400;
--red: #D0021B;
--dark-red: #BB0218;
--green: #0F9E48;
--light-green: #13C65A;
--gradient: linear-gradient(315deg, #5B23E1 0%, #A22FEB 100%);
--harmony-white: #FFFFFF;
--harmony-background: #F3F0F7;
--harmony-blue: #1BA1F1;
--harmony-orange: #FF9400;
--harmony-red: #D0021B;
--harmony-dark-red: #BB0218;
--harmony-green: #0F9E48;
--harmony-light-green: #13C65A;
--harmony-gradient: linear-gradient(315deg, #5B23E1 0%, #A22FEB 100%);
}

/* Day Theme */
html[data-theme='day'] {
/* Primary Colors */
--primary: #CC0FE0;
--p-100: #D63FE6;
--p-200: #D127E3;
--p-300: #CC0FE0;
--p-400: #B80ECA;
--p-500: #A30CB3;
--harmony-primary: #CC0FE0;
--harmony-p-100: #D63FE6;
--harmony-p-200: #D127E3;
--harmony-p-300: #CC0FE0;
--harmony-p-400: #B80ECA;
--harmony-p-500: #A30CB3;

/* Secondary Colors */
--secondary: #7E1BCC;
--s-100: #9849D6;
--s-200: #8B32D1;
--s-300: #7E1BCC;
--s-400: #7118B8;
--s-500: #6516A3;
--harmony-secondary: #7E1BCC;
--harmony-s-100: #9849D6;
--harmony-s-200: #8B32D1;
--harmony-s-300: #7E1BCC;
--harmony-s-400: #7118B8;
--harmony-s-500: #6516A3;

/* Neutral Colors */
--neutral: #858199;
--n-25: #FCFCFC;
--n-50: #F7F7F9;
--n-100: #F2F2F4;
--n-150: #E7E6EB;
--n-200: #DAD9E0;
--n-300: #CECDD6;
--n-400: #C2C0CC;
--n-500: #B6B3C2;
--n-600: #AAA7B8;
--n-700: #9D9AAD;
--n-800: #858199;
--n-900: #78748A;
--n-950: #6A677A;
--harmony-neutral: #858199;
--harmony-n-25: #FCFCFC;
--harmony-n-50: #F7F7F9;
--harmony-n-100: #F2F2F4;
--harmony-n-150: #E7E6EB;
--harmony-n-200: #DAD9E0;
--harmony-n-300: #CECDD6;
--harmony-n-400: #C2C0CC;
--harmony-n-500: #B6B3C2;
--harmony-n-600: #AAA7B8;
--harmony-n-700: #9D9AAD;
--harmony-n-800: #858199;
--harmony-n-900: #78748A;
--harmony-n-950: #6A677A;

/* Special Colors */
--white: #FFFFFF;
--background: #F3F0F7;
--blue: #1BA1F1;
--orange: #FF9400;
--red: #D0021B;
--dark-red: #BB0218;
--green: #0F9E48;
--light-green: #13C65A;
--gradient: linear-gradient(315deg, #5B23E1 0%, #A22FEB 100%);
--harmony-white: #FFFFFF;
--harmony-background: #F3F0F7;
--harmony-blue: #1BA1F1;
--harmony-orange: #FF9400;
--harmony-red: #D0021B;
--harmony-dark-red: #BB0218;
--harmony-green: #0F9E48;
--harmony-light-green: #13C65A;
--harmony-gradient: linear-gradient(315deg, #5B23E1 0%, #A22FEB 100%);
}

/* Dark Theme */
html[data-theme='dark'] {
/* Primary Colors */
--primary: #C74BD3;
--p-100: #A945B9;
--p-200: #B748C6;
--p-300: #C74BD3;
--p-400: #C556D4;
--p-500: #C563D6;
--harmony-primary: #C74BD3;
--harmony-p-100: #A945B9;
--harmony-p-200: #B748C6;
--harmony-p-300: #C74BD3;
--harmony-p-400: #C556D4;
--harmony-p-500: #C563D6;

/* Secondary Colors */
--secondary: #9147CC;
--s-100: #7440A4;
--s-200: #8244B8;
--s-300: #9147CC;
--s-400: #975ACD;
--s-500: #9A60CF;
--harmony-secondary: #9147CC;
--harmony-s-100: #7440A4;
--harmony-s-200: #8244B8;
--harmony-s-300: #9147CC;
--harmony-s-400: #975ACD;
--harmony-s-500: #9A60CF;

/* Neutral Colors */
--neutral: #BEC5E0;
--n-25: #35364F;
--n-50: #393A54;
--n-100: #3F415B;
--n-150: #4E4F6A;
--n-200: #5A5E78;
--n-300: #696D88;
--n-400: #777C96;
--n-500: #868AA4;
--n-600: #9399B3;
--n-700: #A2A8C2;
--n-800: #BEC5E0;
--n-900: #CFD5EC;
--n-950: #D9DEF1;
--harmony-neutral: #BEC5E0;
--harmony-n-25: #35364F;
--harmony-n-50: #393A54;
--harmony-n-100: #3F415B;
--harmony-n-150: #4E4F6A;
--harmony-n-200: #5A5E78;
--harmony-n-300: #696D88;
--harmony-n-400: #777C96;
--harmony-n-500: #868AA4;
--harmony-n-600: #9399B3;
--harmony-n-700: #A2A8C2;
--harmony-n-800: #BEC5E0;
--harmony-n-900: #CFD5EC;
--harmony-n-950: #D9DEF1;

/* Special Colors */
--white: #32334D;
--background: #242438;
--blue: #58B9F4;
--orange: #EFA947;
--red: #F9344C;
--dark-red: #C43047;
--green: #6CDF44;
--light-green: #13C65A;
--gradient: linear-gradient(315deg, #7652CC 0%, #B05CE6 100%);
--harmony-white: #32334D;
--harmony-background: #242438;
--harmony-blue: #58B9F4;
--harmony-orange: #EFA947;
--harmony-red: #F9344C;
--harmony-dark-red: #C43047;
--harmony-green: #6CDF44;
--harmony-light-green: #13C65A;
--harmony-gradient: linear-gradient(315deg, #7652CC 0%, #B05CE6 100%);
}

/* Matrix Theme */
html[data-theme='matrix'] {
/* Primary Colors */
--primary: #0CF10C;
--p-100: #0CF10C;
--p-200: #0CF10C;
--p-300: #0CF10C;
--p-400: #0CF10C;
--p-500: #0CF10C;
--harmony-primary: #0CF10C;
--harmony-p-100: #0CF10C;
--harmony-p-200: #0CF10C;
--harmony-p-300: #0CF10C;
--harmony-p-400: #0CF10C;
--harmony-p-500: #0CF10C;

/* Secondary Colors */
--secondary: #184F17;
--s-100: #184F17;
--s-200: #184F17;
--s-300: #184F17;
--s-400: #184F17;
--s-500: #184F17;
--harmony-secondary: #184F17;
--harmony-s-100: #184F17;
--harmony-s-200: #184F17;
--harmony-s-300: #184F17;
--harmony-s-400: #184F17;
--harmony-s-500: #184F17;

/* Neutral Colors */
--neutral: #21B404;
--n-25: #1D211B;
--n-50: #202A1D;
--n-100: #1A2F15;
--n-150: #1B3714;
--n-200: #1C5610;
--n-300: #1D5E0F;
--n-400: #1D660E;
--n-500: #1F850A;
--n-600: #1F9508;
--n-700: #20A406;
--n-800: #21B404;
--n-900: #21B404;
--n-950: #21B404;
--harmony-neutral: #21B404;
--harmony-n-25: #1D211B;
--harmony-n-50: #202A1D;
--harmony-n-100: #1A2F15;
--harmony-n-150: #1B3714;
--harmony-n-200: #1C5610;
--harmony-n-300: #1D5E0F;
--harmony-n-400: #1D660E;
--harmony-n-500: #1F850A;
--harmony-n-600: #1F9508;
--harmony-n-700: #20A406;
--harmony-n-800: #21B404;
--harmony-n-900: #21B404;
--harmony-n-950: #21B404;

/* Special Colors */
--white: #1F211F;
--background: #191818;
--blue: #58B9F4;
--orange: #EFA947;
--red: #F9344C;
--dark-red: #BB0218;
--green: #6CDF44;
--light-green: #13C65A;
--gradient: linear-gradient(315deg, #7652CC 0%, #B05CE6 100%);
--harmony-white: #1F211F;
--harmony-background: #191818;
--harmony-blue: #58B9F4;
--harmony-orange: #EFA947;
--harmony-red: #F9344C;
--harmony-dark-red: #BB0218;
--harmony-green: #6CDF44;
--harmony-light-green: #13C65A;
--harmony-gradient: linear-gradient(315deg, #7652CC 0%, #B05CE6 100%);
}
Loading