Skip to content
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

Feat/theme demo #544

Open
wants to merge 52 commits into
base: next
Choose a base branch
from
Open

Feat/theme demo #544

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
c9a2747
feat(theme): added css variables based on color palette
kishore-kumar-E3682 Apr 4, 2022
61b1bfa
feat(theme): color standardization
kishore-kumar-E3682 Apr 5, 2022
fa348d1
feat(theme): moved colors from button to theme
kishore-kumar-E3682 Apr 5, 2022
21935ef
feat(theme): modfied color coding
kishore-kumar-E3682 Apr 5, 2022
7fb0028
feat(tabs): adding necessary css variables to theme tabs (#545)
Vignesh-Manogar-E3433 Apr 5, 2022
912dece
fix(theme): updated the correct info color in tab
kishore-kumar-E3682 Apr 5, 2022
b0520d7
feat(theme): add typo
kishore-kumar-E3682 Apr 7, 2022
7793bd4
feat(theme): moved colors to theme.scss
kishore-kumar-E3682 Apr 13, 2022
6466fc8
docs(theme): update docs for theme
kishore-kumar-E3682 Apr 20, 2022
edf1fbe
fix(theme): typo fix
kishore-kumar-E3682 Apr 20, 2022
0a3dd74
feat(theme): updated docs
kishore-kumar-E3682 Apr 21, 2022
1d9f2ca
docs: added elevtion in docs
kishore-kumar-E3682 Apr 21, 2022
3a5e53e
feat(theme): replaced palette with color
kishore-kumar-E3682 Apr 28, 2022
d7d29e8
docs(theme): updated the docs
kishore-kumar-E3682 May 2, 2022
8d1d109
feat(theming): adding color-secondary-10 to sass variables
Vignesh-Manogar-E3433 May 9, 2022
0e54838
feat(theme): update button typography
kishore-kumar-E3682 May 9, 2022
f5651f7
Merge branch 'next' into feat/theme-demo
kishore-kumar-E3682 May 9, 2022
ee8eb12
fix(theming): removing color-sercondary-10
Vignesh-Manogar-E3433 May 9, 2022
cc52fa7
Merge branch 'feat/theme-demo-4' into feat/theme-demo
kishore-kumar-E3682 May 9, 2022
939d8d1
Theming: Update color, font-size, font-weight & line-height variables
srivalli-sivaramasankaran May 9, 2022
9dff3aa
feat(theming): Revert font-size and box shadow values
srivalli-sivaramasankaran May 10, 2022
60b69db
feat(theming): Update comments and fix typo
srivalli-sivaramasankaran May 10, 2022
6bcbf9f
feat(theming): add necessary comments
srivalli-sivaramasankaran May 11, 2022
4e4517a
feat(theming): remove css custom variables for checkbox and avatar
srivalli-sivaramasankaran May 12, 2022
cf89fc9
feat(theming): fix linters
srivalli-sivaramasankaran May 12, 2022
ac9bb09
feat(theming): updating size, color on data-table, datepicker, drag-i…
Vignesh-Manogar-E3433 May 12, 2022
fcbaa61
feat(theming): updating size, color variables on file-uploader, icon,…
Vignesh-Manogar-E3433 May 12, 2022
b96f523
feat(theming): updating size, color variables on input, menu, select,…
Vignesh-Manogar-E3433 May 12, 2022
3f3bf9e
feat(theming): updating font-size and color variables on modal, pagin…
Vignesh-Manogar-E3433 May 12, 2022
b2e3dde
feat(theming): updating font-size and color variables on skeleton, sp…
Vignesh-Manogar-E3433 May 12, 2022
e440ab2
Merge pull request #588 from freshworks/feat/component-theming
srivalli-sivaramasankaran May 12, 2022
17889e5
feat(theming): update color codes of components
srivalli-sivaramasankaran May 13, 2022
852b591
Merge pull request #603 from freshworks/feat/theme-updates
srivalli-sivaramasankaran May 16, 2022
532c804
fix(theming): fixing file uploader hint size (#608)
Vignesh-Manogar-E3433 May 24, 2022
5f0fdc0
feat(design tokens): converting design tokens to css variables (#614)
kishore-kumar-E3682 Jun 6, 2022
fa62011
feat(theming): update components with css custom variables - CRM theme
srivalli-sivaramasankaran Jun 1, 2022
d9c4725
feat(theming): update components with custom css variables - CRM theme
srivalli-sivaramasankaran Jun 6, 2022
53f7966
feat(theming): update index.html and remove unwanted code
srivalli-sivaramasankaran Jun 9, 2022
7b17e16
feat(token builder): selector based tokens (#628)
kishore-kumar-E3682 Jun 21, 2022
cb0ba04
feat: added date-theme attribute for theming
kishore-kumar-E3682 Jun 21, 2022
a3f5191
feat(theming): update components with css custom variables - CRM theme
srivalli-sivaramasankaran Jun 1, 2022
6da6e7a
feat(theming): update components with custom css variables - CRM theme
srivalli-sivaramasankaran Jun 6, 2022
500da0f
feat(theming): update index.html and remove unwanted code
srivalli-sivaramasankaran Jun 9, 2022
8fd0acf
feat(theming): update radio, checkbox and toggle - crm theme
srivalli-sivaramasankaran Jun 23, 2022
718e866
feat(theming): update checkbox, toggle and radio button
srivalli-sivaramasankaran Jun 23, 2022
ef313cb
Merge branch 'feat/theming-crm' of https://github.com/freshworks/cray…
srivalli-sivaramasankaran Jun 23, 2022
d798b32
feat(theming): update design tokens - freshsales
srivalli-sivaramasankaran Jun 28, 2022
2531c6f
feat(theming): update freshsales.json
srivalli-sivaramasankaran Jun 28, 2022
441c635
feat(theming): fix review comments
srivalli-sivaramasankaran Jun 29, 2022
f054e76
Merge pull request #617 from freshworks/feat/theming-crm
srivalli-sivaramasankaran Jul 7, 2022
5c403bb
feat(theming): update inline banner component
srivalli-sivaramasankaran Jul 7, 2022
7bf884f
Merge pull request #637 from freshworks/feat/theming-fsales
srivalli-sivaramasankaran Jul 20, 2022
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
86 changes: 49 additions & 37 deletions packages/crayons-core/src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,58 @@
/**
@prop --fw-button-min-width: minimum width for the button
@prop --fw-button-label-vertical-padding: vertical padding for the button label
@prop --fw-button-height: The height of the normal button.
@prop --fw-button-small-height: The height of the small button.
@prop --fw-button-border-radius: The border radius of the button.
@prop --fw-button-font-weight: The font weight of the button.
@prop --fw-button-font-size: The font size of the normal button.
@prop --fw-button-small-font-size: The font size of the small button.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we also provide customisation for other sizes of button like 'icon' , icon-small also?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icons are passed as slots so we can change the icon size from there.

*/

//=== Button Style ===//
$btn-primary-color: $color-milk;
$btn-primary-bg: $color-elephant-800;
$btn-primary-bg-dark: $color-elephant-900;
$btn-primary-border: $color-elephant-900;
$btn-primary-border-active: $color-elephant-800;

$btn-primary-disabled-bg: $color-smoke-300;
$btn-primary-disabled-bg-dark: #7b8e9f;
$btn-primary-color: $color-neutral-100;
$btn-primary-bg: $color-primary-800;
$btn-primary-bg-dark: $color-primary-900;
$btn-primary-border: $color-primary-900;
$btn-primary-border-active: $color-primary-800;

$btn-primary-disabled-bg: $color-secondary-300;
$btn-primary-disabled-bg-dark: $color-secondary-400;
$btn-primary-disabled-color: rgba($btn-primary-color, 0.5);

$btn-secondary-color: $text-default;
$btn-secondary-bg: $color-milk;
$btn-secondary-bg-dark: $color-smoke-25;
$btn-secondary-border: $border-color;
$btn-secondary-border-active: $color-smoke-50;
$btn-secondary-disabled-bg: $color-smoke-50;
$btn-secondary-disabled-bg-dark: $color-smoke-100;
$btn-secondary-disabled-color: $color-smoke-300;

$btn-danger-color: $color-milk;
$btn-danger-bg: $color-persimmon-800;
$btn-danger-bg-dark: $color-persimmon-900;
$btn-danger-border: $color-persimmon-900;
$btn-danger-disabled-bg: #f89fa1;
$btn-danger-disabled-bg-dark: #f2797b;
$btn-secondary-color: $color-primary-900;
$btn-secondary-bg: $color-neutral-100;
$btn-secondary-bg-dark: $color-secondary-25;
$btn-secondary-border: $color-secondary-100;
$btn-secondary-border-active: $color-secondary-50;
$btn-secondary-disabled-bg: $color-secondary-50;
$btn-secondary-disabled-bg-dark: $color-secondary-100;
$btn-secondary-disabled-color: $color-secondary-300;

$btn-danger-color: $color-neutral-100;
$btn-danger-bg: $color-danger-800;
$btn-danger-bg-dark: $color-danger-900;
$btn-danger-border: $color-danger-900;
$btn-danger-disabled-bg: $color-danger-200;
$btn-danger-disabled-bg-dark: $color-danger-300;
$btn-danger-disabled-color: rgba($btn-primary-color, 0.5);

$btn-link-color: $color-azure-800;
$btn-link-bg: $color-smoke-50;
$btn-link-color: $color-info-800;
$btn-link-bg: $color-secondary-50;

$active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.25);

$btn-default-font-size: $font-size-14;
$btn-small-font-size: $font-size-12;
$btn-mini-font-size: $font-size-10;
$btn-lg-focus-border: $color-info-800;

$btn-font-weight: $font-weight-600;
$btn-default-font-size: var(--fw-button-font-size, $font-sm);
$btn-small-font-size: var(--fw-button-small-font-size, $font-xs);
$btn-mini-font-size: $font-2xs;

$btn-font-weight: var(--fw-button-font-weight, $font-weight-600);

$btn-border-width: 1px;
$input-height-small: 24px;
$input-height-normal: 32px;
$input-height-small: var(--fw-button-small-height, $font-lh-base);
$input-height-normal: var(--fw-button-height, 32px);
$input-height-mini: 16px;

// stylelint-disable a11y/media-prefers-reduced-motion
Expand Down Expand Up @@ -81,7 +89,7 @@ $input-height-mini: 16px;
cursor: inherit;
letter-spacing: 0;
outline: 0;
border-radius: 4px;
border-radius: var(--fw-button-border-radius, 4px);
--fw-icon-color: currentColor;

.fw-btn--label {
Expand Down Expand Up @@ -129,9 +137,9 @@ $input-height-mini: 16px;
&.disabled,
&[disabled] {
background-image: linear-gradient(
to bottom,
$btn-primary-disabled-bg,
$btn-primary-disabled-bg-dark
180deg,
$btn-primary-disabled-bg 4.39%,
$btn-primary-disabled-bg-dark 94.46%
);
border-color: $btn-primary-disabled-bg-dark;
color: $btn-primary-disabled-color;
Expand Down Expand Up @@ -256,8 +264,12 @@ $input-height-mini: 16px;

&--normal {
min-width: var(--fw-button-min-width, 80px);
height: 32px;
height: $input-height-normal;
line-height: calc(#{$input-height-normal} - #{$btn-border-width} * 2);

.fw-btn--label {
font-size: $btn-default-font-size;
}
}

&--icon {
Expand Down Expand Up @@ -361,7 +373,7 @@ $sizes: 'normal' 12px 8px, 'small' 8px 6px, 'mini' 6px 4px;
.fw-btn--loader {
opacity: 0;
position: absolute;
font-size: 1em;
font-size: $font-base;
height: 1em;
width: 1em;
top: calc(50% - 0.5em);
Expand Down
6 changes: 6 additions & 0 deletions packages/crayons-core/src/components/button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,8 +289,14 @@ Type: `Promise<any>`

| Name | Description |
| ------------------------------------ | ------------------------------------- |
| `--fw-button-border-radius` | The border radius of the button. |
| `--fw-button-font-size` | The font size of the normal button. |
| `--fw-button-font-weight` | The font weight of the button. |
| `--fw-button-height` | The height of the normal button. |
| `--fw-button-label-vertical-padding` | vertical padding for the button label |
| `--fw-button-min-width` | minimum width for the button |
| `--fw-button-small-font-size` | The font size of the small button. |
| `--fw-button-small-height` | The height of the small button. |


## Dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/crayons-core/src/components/data-table/data-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ div.fw-data-table-container {
background: $color-milk;
border: 1px solid $color-smoke-50;
border-radius: 4px;
box-shadow: -15px 20px 40px rgba(0, 0, 0, 0.04);
box-shadow: $elevation-level1;
padding: 22px 0px 0px 0px;
display: none;
animation: appear 0.3s;
Expand Down
2 changes: 1 addition & 1 deletion packages/crayons-core/src/components/modal/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
display: flex;
max-height: 70vh;
background: $color-milk;
box-shadow: 0px 2px 18px rgba(18, 52, 77, 0.2);
box-shadow: $elevation-level2;
border-radius: 4px;
z-index: 999;
animation: 'modal-entry' 0.5s 1;
Expand Down
2 changes: 1 addition & 1 deletion packages/crayons-core/src/components/popover/popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
background: $popover-background;
box-sizing: border-box;
outline: none;
box-shadow: -15px 20px 40px rgba(0, 0, 0, 0.04);
box-shadow: $elevation-level1;
user-select: none;
transform: scale(0.01);
transition: 150ms color, 150ms border, 150ms box-shadow;
Expand Down
20 changes: 20 additions & 0 deletions packages/crayons-core/src/components/tab/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,26 @@ function App() {
| `tabName` | `tab-name` | Unique name of the tab. | `string` | `undefined` |


## CSS Custom Properties

| Name | Description |
| ------------------------------ | ------------------------------------------------------ |
| `--fw-tab-background` | background color of the tab item. |
| `--fw-tab-background-active` | background of the tab item when tab is active. |
| `--fw-tab-border-color` | border color of the tab item. |
| `--fw-tab-border-color-active` | border color of the tab item when tab is active. |
| `--fw-tab-border-color-hover` | border color of the tab item on hover. |
| `--fw-tab-color` | color of the text inside tab. |
| `--fw-tab-color-active` | color of the text inside tab when tab is active. |
| `--fw-tab-margin-lr` | margin left-right of the tab item. |
| `--fw-tab-margin-tb` | margin top/bottom of the tab item. |
| `--fw-tab-padding-lr` | padding left/right for the tab item. |
| `--fw-tab-padding-tb` | padding top/bottom for tab item. |
| `--fw-tab-top-radius` | top left/right radius of the tab item. |
| `--fw-tab-weight` | font weight of the text inside tab. |
| `--fw-tab-weight-active` | font weight of the text inside tab when tab is active. |


----------------------------------------------

Built with ❤ at Freshworks
44 changes: 34 additions & 10 deletions packages/crayons-core/src/components/tab/tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,50 @@
/**
@prop --fw-tab-padding-tb: padding top/bottom for tab item.
@prop --fw-tab-padding-lr: padding left/right for the tab item.
@prop --fw-tab-color: color of the text inside tab.
@prop --fw-tab-weight: font weight of the text inside tab.
@prop --fw-tab-weight-active: font weight of the text inside tab when tab is active.
@prop --fw-tab-margin-tb: margin top/bottom of the tab item.
@prop --fw-tab-margin-lr: margin left-right of the tab item.
@prop --fw-tab-top-radius: top left/right radius of the tab item.
@prop --fw-tab-background: background color of the tab item.
@prop --fw-tab-background-active: background of the tab item when tab is active.
@prop --fw-tab-border-color: border color of the tab item.
@prop --fw-tab-border-color-hover: border color of the tab item on hover.
@prop --fw-tab-border-color-active: border color of the tab item when tab is active.
@prop --fw-tab-color-active: color of the text inside tab when tab is active.
*/

.tab {
display: inline-flex;
white-space: nowrap;
cursor: pointer;
align-items: center;
padding: 10px 8px;
padding: var(--fw-tab-padding-tb, 10px) var(--fw-tab-padding-lr, 8px);
line-height: 20px;
color: $color-smoke-700;
color: var(--fw-tab-color, $color-secondary-700);
font-size: $font-size-14;
font-weight: $font-weight-400;
margin: 0 4px;
font-weight: var(--fw-tab-weight, $font-weight-400);
margin: var(--fw-tab-margin-tb, 0px) var(--fw-tab-margin-lr, 4px);
border-radius: var(--fw-tab-top-radius, 0px) var(--fw-tab-top-radius, 0px) 0px
0px;
background: var(--fw-tab-background, transparent);
padding-bottom: var(--fw-tab-padding-tb, 8px);
border-bottom: 2px solid var(--fw-tab-border-color, transparent);

/* stylelint-disable */
&:hover:not(.disabled) {
padding-bottom: 8px;
border-bottom: 2px solid $color-smoke-300;
padding-bottom: var(--fw-tab-padding-tb, 8px);
border-bottom: 2px solid
var(--fw-tab-border-color-hover, $color-secondary-300);
}

&.active:not(.disabled) {
padding-bottom: 8px;
border-bottom: 2px solid $color-azure-800;
color: $color-azure-800;
font-weight: $font-weight-600;
padding-bottom: var(--fw-tab-padding-tb, 8px);
border-bottom: 2px solid var(--fw-tab-border-color-active, $color-info-800);
color: var(--fw-tab-color-active, $color-info-800);
font-weight: var(--fw-tab-weight-active, $font-weight-600);
background: var(--fw-tab-background-active, transparent);
}

&.disabled {
Expand Down
21 changes: 13 additions & 8 deletions packages/crayons-core/src/components/tabs/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,14 +151,19 @@ Type: `Promise<void>`

## CSS Custom Properties

| Name | Description |
| ------------------------- | ------------------------------- |
| `--fw-tabs-height` | height of the tab container. |
| `--fw-tabs-margin-l` | left margin for the tab items |
| `--fw-tabs-margin-r` | right margin for the tab items |
| `--fw-tabs-padding-left` | left padding for the tab items |
| `--fw-tabs-padding-right` | right padding for the tab items |
| `--fw-tabs-width` | width of the tab container. |
| Name | Description |
| ---------------------------- | -------------------------------------------------- |
| `--fw-tabs-border-color` | color of border separating tabs and the tab panel. |
| `--fw-tabs-border-width` | width of border separating tabs and the tab panel. |
| `--fw-tabs-box-background` | box variant background color. |
| `--fw-tabs-box-border-color` | box variant tabs container border color. |
| `--fw-tabs-box-border-width` | box variant tabs container border width. |
| `--fw-tabs-height` | height of the tab container. |
| `--fw-tabs-margin-l` | left margin for the tab items |
| `--fw-tabs-margin-r` | right margin for the tab items |
| `--fw-tabs-padding-left` | left padding for the tab items |
| `--fw-tabs-padding-right` | right padding for the tab items |
| `--fw-tabs-width` | width of the tab container. |


## Dependencies
Expand Down
13 changes: 10 additions & 3 deletions packages/crayons-core/src/components/tabs/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
@prop --fw-tabs-margin-r: right margin for the tab items
@prop --fw-tabs-padding-left: left padding for the tab items
@prop --fw-tabs-padding-right: right padding for the tab items
@prop --fw-tabs-border-width: width of border separating tabs and the tab panel.
@prop --fw-tabs-border-color: color of border separating tabs and the tab panel.
@prop --fw-tabs-box-background: box variant background color.
@prop --fw-tabs-box-border-width: box variant tabs container border width.
@prop --fw-tabs-box-border-color: box variant tabs container border color.
*/

.tabs {
Expand All @@ -20,13 +25,15 @@
margin-left: var(--fw-tabs-margin-l, 0);
margin-right: var(--fw-tabs-margin-r, 0);
display: flex;
border-bottom: 1px solid $color-smoke-50;
border-bottom: var(--fw-tabs-border-width, 1px) solid
var(--fw-tabs-border-color, $color-secondary-50);
overflow-x: auto;
overflow-y: hidden;

&__box {
background-color: $app-header-bg-secondary;
border: 1px solid $color-smoke-50;
background-color: var(--fw-tabs-box-background, $app-header-bg-secondary);
border: var(--fw-tabs-box-border-width, 1px) solid
var(--fw-tabs-box-border-color, $color-secondary-50);
box-sizing: border-box;
border-radius: $radius;
}
Expand Down
Loading