Skip to content

Commit

Permalink
Feat: update theme (#38)
Browse files Browse the repository at this point in the history 
* Feat: update new themes

---------

Co-authored-by: khoilen <[email protected]>
  • Loading branch information
@khoilen
khoilen and khoilen authored Jan 10, 2025
1 parent db13fb1 commit d6c323c
Show file tree
Hide file tree
Showing 8 changed files with 2,698 additions and 3,409 deletions.
5,855 changes: 2,537 additions & 3,318 deletions apps/nt-stylesheet/pnpm-lock.yaml
View file

Large diffs are not rendered by default.

18 changes: 12 additions & 6 deletions apps/nt-stylesheet/styles/base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,47 @@
@layer base {
h1 {
font-size: 1.5rem;
font-size: 2.25rem;
line-height: 3.375rem;
@media (min-width: theme('screens.md')) {
font-size: 2.25rem;
}
}

h2 {
font-size: 1.5rem;
font-size: 2rem;
line-height: 3rem;
@media (min-width: theme('screens.md')) {
font-size: 2rem;
}
}

h3 {
font-size: 1.25rem;
font-size: 1.75rem;
line-height: 2.625rem;
@media (min-width: theme('screens.md')) {
font-size: 1.75rem;
}
}

h4 {
font-size: 1.125rem;
font-size: 1.5rem;
line-height: 2.25rem;
@media (min-width: theme('screens.md')) {
font-size: 1.5rem;
}
}

h5 {
font-size: 1rem;
font-size: 1.25rem;
line-height: 1.875rem;
@media (min-width: theme('screens.md')) {
font-size: 1.25rem;
}
}

h6 {
font-size: 0.875rem;
font-size: 1rem;
line-height: 24px;
@media (min-width: theme('screens.md')) {
font-size: 1rem;
}
Expand Down
82 changes: 64 additions & 18 deletions apps/nt-stylesheet/styles/component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
@layer components {
.avatar {
@apply rounded-full;
width: 2.5rem;
height: 2.5rem;
}

.avatar-xs {
@apply rounded-full;
width: 1.5rem;
height: 1.5rem;
}

.avatar-sm {
@apply rounded-full;
width: 2rem;
height: 2rem;
width: 1.25rem;
height: 1.25rem;
}

.avatar-xlg {
@apply rounded-full;
width: 3rem;
height: 3rem;
width: 2.5rem;
height: 2.5rem;
}

.avatar-xxlg {
.avatar-lg {
@apply rounded-full;
width: 4rem;
height: 4rem;
width: 2rem;
height: 2rem;
}

.avatar-xxxlg {
.avatar-xs {
@apply rounded-full;
width: 5rem;
height: 5rem;
width: 1rem;
height: 1rem;
}

.icon-4lg {
font-size: 3rem;
}
.icon-xxxlg {
font-size: 2.5rem;
}
.icon {
font-size: 1rem;
}
Expand Down Expand Up @@ -104,12 +104,24 @@
}
}

.body {
font-size: 0.875rem;
.body-lg {
font-size: 1.125rem;
line-height: 1.6875rem;
}

.body-md {
font-size: 1rem;
line-height: 1.5rem;
}

.body-sm {
font-size: 0.875rem;
line-height: 1.3125rem;
}

.body-xs {
font-size: 0.75rem;
line-height: 1.125rem;
}

.line {
Expand Down Expand Up @@ -162,4 +174,38 @@
padding-left: 0.375rem;
padding-right: 0.375rem;
}

.form-control {
min-height: 40px;
font-size: 16px;
.icon {
font-size: 16px;
}
padding: 0 18px;
}

.form-control-lg {
min-height: 48px;
font-size: 18px;
.icon {
font-size: 18px;
}
padding: 0 24px;
}
.form-control-sm {
min-height: 32px;
font-size: 14px;
.icon {
font-size: 14px;
}
padding: 0 12px;
}
.form-control-xs {
min-height: 24px;
font-size: 12px;
.icon {
font-size: 12px;
}
padding: 0 8px;
}
}
111 changes: 56 additions & 55 deletions apps/nt-stylesheet/themes/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,17 @@ export const colors: ThemeConfig['colors'] = {
blue: {
DEFAULT: '#0094D5',
},
primary: {
DEFAULT: '#D6001C',
90: '#DA1A33',
80: '#DE3349',
70: '#E24D60',
60: '#E66677',
50: '#EB808E',
40: '#EF99A4',
30: '#F3B3BB',
20: '#F7CCD2',
10: '#FBE6E8',
},
'secondary-1': {
primary: '#D6001C',
'shade-secondary-1': {
'190': '#0B030C',
'180': '#150618',
'170': '#200925',
'160': '#2A0C31',
'150': '#35103D',
'140': '#401349',
'130': '#4A1655',
'120': '#551962',
'110': '#5F1C6E',
DEFAULT: '#6A1F7A',
90: '#793587',
80: '#884C95',
Expand All @@ -35,7 +33,7 @@ export const colors: ThemeConfig['colors'] = {
20: '#E1D2E4',
10: '#F0E9F2',
},
'secondary-2': {
'shade-secondary-2': {
DEFAULT: '#0094D5',
90: '#1A9FD9',
80: '#33A9DD',
Expand All @@ -46,8 +44,9 @@ export const colors: ThemeConfig['colors'] = {
30: '#B3DFF2',
20: '#CCEAF7',
10: '#E6F4FB',
9: '#F0F5FE',
},
pink: {
'shade-secondary-3': {
DEFAULT: '#E31C79',
90: '#E63386',
80: '#E94994',
Expand All @@ -59,6 +58,31 @@ export const colors: ThemeConfig['colors'] = {
20: '#F9D2E4',
10: '#FCE8F2',
},
'shade-secondary-4': {
DEFAULT: '#F4AD33',
90: '#F5B547',
80: '#F6BD5C',
70: '#F7C670',
60: '#F8CE85',
50: '#FAD699',
40: '#FBDEAD',
30: '#FCE6C2',
20: '#FDEFD6',
10: '#FEF7EB',
},
'shade-neutral': {
DEFAULT: '#28292B',
90: '#3E3E40',
80: '#535455',
70: '#69696B',
60: '#7E7F80',
50: '#949495',
40: '#A9A9AA',
30: '#BFBFBF',
20: '#D4D4D5',
10: '#EAEAEA',
9: '#F6F6F6',
},
yellow: {
DEFAULT: '#F4AD33',
90: '#F5B547',
Expand All @@ -83,56 +107,29 @@ export const colors: ThemeConfig['colors'] = {
80: '#2B0006',
90: '#150003',
},
'shade-secondary-1': {
DEFAULT: '#6A1F7A',
10: '#5F1C6E',
20: '#551962',
30: '#4A1655',
40: '#401349',
50: '#35103D',
60: '#2A0C31',
70: '#200925',
80: '#150618',
90: '#0B030C',
},
neutral: {
DEFAULT: '#28292B',
100: '#000000',
90: '#1A1A1A',
80: '#28292B',
70: '#28292B',
60: '#62666B',
50: '#808080',
40: '#999999',
30: '#9EA3AB',
20: '#C9CCD4',
10: '#E6E6E6',
5: '#F0F5FE',
1: '#F6F6F6',
},
success: {
500: '#359000',
bold: '#359000',
DEFAULT: '#6CD430',
300: '#ABE38B',
200: '#E4FFD5',
light: '#ABE38B',
thin: '#E4FFD5',
},
warning: {
500: '#DF7700',
bold: '#DF7700',
DEFAULT: '#FFB92E',
300: '#FED496',
200: '#FFF0DA',
light: '#FED496',
thin: '#FFF0DA',
},
danger: {
500: '#E51010',
bold: '#E51010',
DEFAULT: '#FA5151',
300: '#F9BBBB',
200: '#FFE9E9',
light: '#F9BBBB',
thin: '#FFE9E9',
},
info: {
500: '#0094D5',
bold: '#0094D5',
DEFAULT: '#33A9DD',
300: '#B3DFF2',
200: '#E6F4FB',
light: '#B3DFF2',
thin: '#E6F4FB',
},
line: {
dark: '#E6E6E6',
Expand All @@ -145,11 +142,15 @@ export const colors: ThemeConfig['colors'] = {

export const boxShadow = {
primary: '0 0.125rem 0.25rem rgba(214, 0, 28, 0.15)',
'secondary-1': '0 0.25rem 0.375rem rgba(106, 31, 122, 0.15)',
'secondary-2': '0 0.25rem 0.375rem rgba(0, 148, 213, 0.15)',
'secondary-3': '0 0.25rem 0.375rem rgba(227, 28, 121, 0.15)',
'secondary-4': '0 0.25rem 0.375rem rgba(244, 173, 51, 0.15)',
secondary: '0 0.25rem 0.375rem rgba(106, 31, 122, 0.15)',
success: '0 0.25rem 0.375rem rgba(53, 144, 0, 0.15)',
warning: '0 0.25rem 0.375rem rgba(223, 119, 0, 0.15)',
danger: '0 0.25rem 0.375rem rgba(229, 16, 16, 0.15)',
neutral: '0 0.25rem 0.375rem rgba(0, 0, 0, 0.1)',
info: '0 0.25rem 0.375rem rgba(0, 148, 213, 0.15);',
}

export const backgroundColor = {
Expand Down
7 changes: 5 additions & 2 deletions apps/nt-stylesheet/themes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,18 @@ const theme: Partial<ThemeConfig & { extend: Partial<ThemeConfig> }> =
{
extend: {
gap,
spacing,
spacing: {
...spacing,
...gap,
gutter: '1.5rem',
},
borderRadius,
colors,
fontFamily,
fontWeight,
screens: {
'viewport-min': '80rem',
'viewport-max': '120rem',
'page-container-max': '80rem',
},
backgroundColor,
boxShadow,
Expand Down
11 changes: 6 additions & 5 deletions apps/nt-stylesheet/themes/radius.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
export const borderRadius = {
xxxlg: '1.25rem',
xxlg: '0.75rem',
md: '0.5rem',
lg: '0.375rem',
'selection-md': '1.25rem',
'selection-sm': '1rem',
'group-md': '0.75rem',
'group-sm': '0.5rem',
DEFAULT: '0.25rem',
sm: '0.125rem',
badge: '0.125rem',
avatar: '6.25rem',
}
Loading

0 comments on commit d6c323c

Please sign in to comment.