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

Jump to bottom

feat(storybook): added controls for CSS variables #1152

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

feat(storybook): added controls for CSS variables #1152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
26a23c3
feat(storybook) added css variable support to template generator
iandi09 Dec 29, 2023
852a48f
feat(storybook) extracted css docs and added them to the template gen…
iandi09 Dec 29, 2023
09926a2
feat(storybook) fixed format
iandi09 Dec 29, 2023
717d152
feat(storybook) extracting css props from stencil-docs json file
iandi09 Jan 11, 2024
63c906f
feat(storybook) updated dev handbook
iandi09 Jan 11, 2024
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
7 changes: 3 additions & 4 deletions packages/elements/src/components/ino-avatar/ino-avatar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
@use '../base/typography-new' as typography;
@use '../base/new-theme' as theme;

/**
* @prop --ino-avatar-size: Width and height of the ino-avatar
*/

@mixin flex-center {
display: flex;
justify-content: center;
Expand All @@ -30,6 +26,9 @@
}

.ino-avatar {
/**
* @prop --ino-avatar-size: Width and height of the ino-avatar. [size:138]
*/
--avatar-size: var(--ino-avatar-size, 138px);
@include flex-center;
width: var(--avatar-size);
Expand Down
6 changes: 3 additions & 3 deletions packages/elements/src/components/ino-avatar/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@

## CSS Custom Properties

| Name | Description |
| ------------------- | ---------------------------------- |
| `--ino-avatar-size` | Width and height of the ino-avatar |
| Name | Description |
| ------------------- | ---------------------------------------------- |
| `--ino-avatar-size` | Width and height of the ino-avatar. [size:138] |


----------------------------------------------
Expand Down
16 changes: 8 additions & 8 deletions packages/elements/src/components/ino-card/ino-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ $big-shadow: 0 8px 16px 0 rgba(theme.color(dark), 0.3),

ino-card {
/**
* @prop --ino-card-background-color: background color of the card
* @prop --ino-card-background-color--active: background color of the card if active
* @prop --ino-card-background-color--focus: background color of the card on focus
* @prop --ino-card-background-color--hover: background color of the card on hover
* @prop --ino-card-border-color: border color of the card
* @prop --ino-card-border-thickness: thickness of the border
* @prop --ino-card-checkmark-background-color: background color of the check mark
* @prop --ino-card-checkmark-color: check mark color
* @prop --ino-card-background-color: Background color of the card. [color:#fff]
* @prop --ino-card-background-color--active: Background color of the card if active. [color:#fff]
* @prop --ino-card-background-color--focus: Background color of the card on focus. [color:#fff]
* @prop --ino-card-background-color--hover: Background color of the card on hover. [color:#fff]
* @prop --ino-card-border-color: Border color of the card. [color:#c1c1c1]
* @prop --ino-card-border-thickness: Thickness of the border. [size:1]
* @prop --ino-card-checkmark-background-color: Background Color of the check mark. [color:#fff]
* @prop --ino-card-checkmark-color: Check mark color. [color:#3d40f5]
*/
--card-background-color: var(--ino-card-background-color, #fff);
--card-background-color--active: var(
Expand Down
20 changes: 10 additions & 10 deletions packages/elements/src/components/ino-card/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,16 @@ fully customize the appearance of the card.

## CSS Custom Properties

| Name | Description |
| --------------------------------------- | -------------------------------------- |
| `--ino-card-background-color` | background color of the card |
| `--ino-card-background-color--active` | background color of the card if active |
| `--ino-card-background-color--focus` | background color of the card on focus |
| `--ino-card-background-color--hover` | background color of the card on hover |
| `--ino-card-border-color` | border color of the card |
| `--ino-card-border-thickness` | thickness of the border |
| `--ino-card-checkmark-background-color` | background color of the check mark |
| `--ino-card-checkmark-color` | check mark color |
| Name | Description |
| --------------------------------------- | ---------------------------------------------------- |
| `--ino-card-background-color` | Background color of the card. [color:#fff] |
| `--ino-card-background-color--active` | Background color of the card if active. [color:#fff] |
| `--ino-card-background-color--focus` | Background color of the card on focus. [color:#fff] |
| `--ino-card-background-color--hover` | Background color of the card on hover. [color:#fff] |
| `--ino-card-border-color` | Border color of the card. [color:#c1c1c1] |
| `--ino-card-border-thickness` | Thickness of the border. [size:1] |
| `--ino-card-checkmark-background-color` | Background Color of the check mark. [color:#fff] |
| `--ino-card-checkmark-color` | Check mark color. [color:#3d40f5] |


## Dependencies
Expand Down
4 changes: 2 additions & 2 deletions packages/elements/src/components/ino-carousel/ino-carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

ino-carousel {
/**
* @prop --ino-carousel-icon-color: sets the color of the navigation buttons
* @prop --ino-carousel-animation-duration: sets the duration of the slide animation
* @prop --ino-carousel-icon-color: Sets the color of the navigation buttons. [color:#fff]
* @prop --ino-carousel-animation-duration: Sets the duration of the slide animation. [time:700]
*/
--carousel-icon-color: var(--ino-carousel-icon-color, #fff);
--carousel-animation-duration: var(--ino-carousel-animation-duration, 700ms);
Expand Down
8 changes: 4 additions & 4 deletions packages/elements/src/components/ino-carousel/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ the dimensions of the component as well as the duration of the slide transition.

## CSS Custom Properties

| Name | Description |
| ----------------------------------- | ---------------------------------------- |
| `--ino-carousel-animation-duration` | sets the duration of the slide animation |
| `--ino-carousel-icon-color` | sets the color of the navigation buttons |
| Name | Description |
| ----------------------------------- | ------------------------------------------------------ |
| `--ino-carousel-animation-duration` | Sets the duration of the slide animation. [time:700] |
| `--ino-carousel-icon-color` | Sets the color of the navigation buttons. [color:#fff] |


## Dependencies
Expand Down
22 changes: 11 additions & 11 deletions packages/elements/src/components/ino-dialog/ino-dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ $material-dialog-box-shadow: 0px 0px 22px rgba(93, 91, 105, 0.35);

:host {
/**
* @prop --ino-dialog-background-color: background color of the dialog
* @prop --ino-dialog-width: width of the dialog
* @prop --ino-dialog-min-width: min-width of the dialog
* @prop --ino-dialog-max-width: max-width of the dialog
* @prop --ino-dialog-height: height of the dialog
* @prop --ino-dialog-min-height: min-height of the dialog
* @prop --ino-dialog-max-height: max-height of the dialog
* @prop --ino-dialog-border-radius: border-radius of the dialog
* @prop --ino-dialog-border: border shorthand of the dialog
* @prop --ino-dialog-box-shadow: box-shadow of the dialog
* @prop --ino-dialog-overlay-background-color: background color of the overlay
* @prop --ino-dialog-background-color: Background color of the dialog. [color:#fff]
* @prop --ino-dialog-width: Width of the dialog. [size]
* @prop --ino-dialog-min-width: Min width of the dialog. [size:480]
* @prop --ino-dialog-max-width: Max width of the dialog. [size:552]
* @prop --ino-dialog-height: height of the dialog. [size]
* @prop --ino-dialog-min-height: Min height of the dialog. [size]
* @prop --ino-dialog-max-height: Max height of the dialog. [size]
* @prop --ino-dialog-padding: Padding of the dialog. [size:62]
* @prop --ino-dialog-border-radius: Border radius of the dialog. [size:17]
* @prop --ino-dialog-border: Border shorthand of the dialog. [text:1px solid #2c02ff]
* @prop --ino-dialog-box-shadow: Box shadow of the dialog. [text:0px 0px 22px rgba(93, 91, 105, 0.35)]
*/
$background-color: var(--ino-dialog-background-color, #fff);
$width: var(--ino-dialog-width, auto);
Expand Down
26 changes: 13 additions & 13 deletions packages/elements/src/components/ino-dialog/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,19 @@ It is based on the mdc-dialog and is fully customizable. The styling of a dialog

## CSS Custom Properties

| Name | Description |
| --------------------------------------- | ------------------------------- |
| `--ino-dialog-background-color` | background color of the dialog |
| `--ino-dialog-border` | border shorthand of the dialog |
| `--ino-dialog-border-radius` | border-radius of the dialog |
| `--ino-dialog-box-shadow` | box-shadow of the dialog |
| `--ino-dialog-height` | height of the dialog |
| `--ino-dialog-max-height` | max-height of the dialog |
| `--ino-dialog-max-width` | max-width of the dialog |
| `--ino-dialog-min-height` | min-height of the dialog |
| `--ino-dialog-min-width` | min-width of the dialog |
| `--ino-dialog-overlay-background-color` | background color of the overlay |
| `--ino-dialog-width` | width of the dialog |
| Name | Description |
| ------------------------------- | --------------------------------------------------------------------- |
| `--ino-dialog-background-color` | Background color of the dialog. [color:#fff] |
| `--ino-dialog-border` | Border shorthand of the dialog. [text:1px solid #2c02ff] |
| `--ino-dialog-border-radius` | Border radius of the dialog. [size:17] |
| `--ino-dialog-box-shadow` | Box shadow of the dialog. [text:0px 0px 22px rgba(93, 91, 105, 0.35)] |
| `--ino-dialog-height` | height of the dialog. [size] |
| `--ino-dialog-max-height` | Max height of the dialog. [size] |
| `--ino-dialog-max-width` | Max width of the dialog. [size:552] |
| `--ino-dialog-min-height` | Min height of the dialog. [size] |
| `--ino-dialog-min-width` | Min width of the dialog. [size:480] |
| `--ino-dialog-padding` | Padding of the dialog. [size:62] |
| `--ino-dialog-width` | Width of the dialog. [size] |


## Dependencies
Expand Down
16 changes: 8 additions & 8 deletions packages/elements/src/components/ino-fab/ino-fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,14 @@ $extended-edged-borders: (

:host {
/**
* @prop --ino-fab-color: Text color
* @prop --fab-background-color: Background color
* @prop --fab-background-color-hover: Background color on hover
* @prop --fab-background-color-active: Background color if active
* @prop --fab-icon-color: Color of the slotted icon
* @prop --fab-color-disabled: Text color if disabled
* @prop --fab-background-color-disabled: Background color if disabled
* @prop --fab-icon-color-disabled: Color of the slotted icon if disabled
* @prop --ino-fab-color: Text color. [color:#fff]
* @prop --fab-background-color: Background color. [color:#2d02ff]
* @prop --fab-background-color-hover: Background color on hover. [color:#4655ff]
* @prop --fab-background-color-active: Background color if active. [color:#1801e1]
* @prop --fab-icon-color: Color of the slotted icon. [color:#fff]
* @prop --fab-color-disabled: Text color if disabled. [color:#fff]
* @prop --fab-background-color-disabled: Background color if disabled. [color:#b6b4c4]
* @prop --fab-icon-color-disabled: Color of the slotted icon if disabled. [color:#fff]
*/
--fab-color: var(--ino-fab-color, white);
--fab-background-color: var(--ino-fab-background-color, #{theme.$p-6});
Expand Down
20 changes: 10 additions & 10 deletions packages/elements/src/components/ino-fab/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,16 @@ FABs come in three types: regular, mini, and extended

## CSS Custom Properties

| Name | Description |
| --------------------------------- | ------------------------------------- |
| `--fab-background-color` | Background color |
| `--fab-background-color-active` | Background color if active |
| `--fab-background-color-disabled` | Background color if disabled |
| `--fab-background-color-hover` | Background color on hover |
| `--fab-color-disabled` | Text color if disabled |
| `--fab-icon-color` | Color of the slotted icon |
| `--fab-icon-color-disabled` | Color of the slotted icon if disabled |
| `--ino-fab-color` | Text color |
| Name | Description |
| --------------------------------- | --------------------------------------------------- |
| `--fab-background-color` | Background color. [color:#2d02ff] |
| `--fab-background-color-active` | Background color if active. [color:#1801e1] |
| `--fab-background-color-disabled` | Background color if disabled. [color:#b6b4c4] |
| `--fab-background-color-hover` | Background color on hover. [color:#4655ff] |
| `--fab-color-disabled` | Text color if disabled. [color:#fff] |
| `--fab-icon-color` | Color of the slotted icon. [color:#fff] |
| `--fab-icon-color-disabled` | Color of the slotted icon if disabled. [color:#fff] |
| `--ino-fab-color` | Text color. [color:#fff] |


## Dependencies
Expand Down
19 changes: 9 additions & 10 deletions packages/elements/src/components/ino-icon-button/ino-icon-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,15 @@

ino-icon-button {
/**
* @prop --ino-icon-button-size: size of the entire button
* @prop --ino-icon-button-icon-size: size of the icon itself
* @prop --ino-icon-button-icon-color: default color of the icon itself
* @prop --ino-icon-button-background-color: default color of the background
* @prop --ino-icon-button-icon-active-color: color of the active icon itself
* @prop --ino-icon-button-background-active-color: base color of the active background
* @prop --ino-icon-button-icon-disabled-color: color of the icon itself in disabled state
* @prop --ino-icon-button-background-disabled-color: base color of the background in disabled state
*/

* @prop --ino-icon-button-size: Size of the entire button. [size:48]
* @prop --ino-icon-button-icon-size: Size of the icon itself. [size:24]
* @prop --ino-icon-button-icon-color: Default color of the icon itself. [color:#4655ff]
* @prop --ino-icon-button-background-color: Default color of the background. [color:transparent]
* @prop --ino-icon-button-icon-active-color: Color of the active icon itself. [color:#4655ff]
* @prop --ino-icon-button-background-active-color: Base color of the active background. [color:#4655ff]
* @prop --ino-icon-button-icon-disabled-color: Color of the icon itself in disabled state. [color:#100707]
* @prop --ino-icon-button-background-disabled-color: Base color of the background in disabled state. [color:#100707]
*/
$button-size: var(--ino-icon-button-size, 48px);
$icon-size: var(--ino-icon-button-icon-size, 24px);
$icon-color: var(--ino-icon-button-icon-color, theme.$p-5);
Expand Down
20 changes: 10 additions & 10 deletions packages/elements/src/components/ino-icon-button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,16 @@ A rounded button component that contains an icon. It functions as a wrapper arou

## CSS Custom Properties

| Name | Description |
| --------------------------------------------- | ---------------------------------------------- |
| `--ino-icon-button-background-active-color` | base color of the active background |
| `--ino-icon-button-background-color` | default color of the background |
| `--ino-icon-button-background-disabled-color` | base color of the background in disabled state |
| `--ino-icon-button-icon-active-color` | color of the active icon itself |
| `--ino-icon-button-icon-color` | default color of the icon itself |
| `--ino-icon-button-icon-disabled-color` | color of the icon itself in disabled state |
| `--ino-icon-button-icon-size` | size of the icon itself |
| `--ino-icon-button-size` | size of the entire button |
| Name | Description |
| --------------------------------------------- | --------------------------------------------------------------- |
| `--ino-icon-button-background-active-color` | Base color of the active background. [color:#4655ff] |
| `--ino-icon-button-background-color` | Default color of the background. [color:transparent] |
| `--ino-icon-button-background-disabled-color` | Base color of the background in disabled state. [color:#100707] |
| `--ino-icon-button-icon-active-color` | Color of the active icon itself. [color:#4655ff] |
| `--ino-icon-button-icon-color` | Default color of the icon itself. [color:#4655ff] |
| `--ino-icon-button-icon-disabled-color` | Color of the icon itself in disabled state. [color:#100707] |
| `--ino-icon-button-icon-size` | Size of the icon itself. [size:24] |
| `--ino-icon-button-size` | Size of the entire button. [size:48] |


## Dependencies
Expand Down
7 changes: 3 additions & 4 deletions packages/elements/src/components/ino-icon/ino-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@

:host {
/**
* @prop --ino-icon-width: Width of the icon
* @prop --ino-icon-height: Height of the icon
* @prop --ino-icon-color: Color of the icon
* @prop --ino-icon-width: Width of the icon. [size:2:em]
* @prop --ino-icon-height: Height of the icon. [size:2:em]
* @prop --ino-icon-color: Color of the icon. [color:#3d40f5]
*/

--icon-width: var(--ino-icon-width, 1em);
--icon-height: var(--ino-icon-height, 1em);
--icon-color: var(
Expand Down
10 changes: 5 additions & 5 deletions packages/elements/src/components/ino-icon/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,11 @@ Alternatively, you can also just provide the URL to your preferred icon by setti

## CSS Custom Properties

| Name | Description |
| ------------------- | ------------------ |
| `--ino-icon-color` | Color of the icon |
| `--ino-icon-height` | Height of the icon |
| `--ino-icon-width` | Width of the icon |
| Name | Description |
| ------------------- | ---------------------------------- |
| `--ino-icon-color` | Color of the icon. [color:#3d40f5] |
| `--ino-icon-height` | Height of the icon. [size:2:em] |
| `--ino-icon-width` | Width of the icon. [size:2:em] |


## Dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/elements/src/components/ino-img-list/ino-img-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

ino-img-list {
/**
* @prop --ino-img-list-cols: sets the number of columns
* @prop --ino-img-list-cols: Sets the number of columns. [number:3]
*/
--img-list-cols: var(--ino-img-list-cols, 3);
}
Expand Down
6 changes: 3 additions & 3 deletions packages/elements/src/components/ino-img-list/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ in a grid-like format. It is based on the mdc-image-list component.

## CSS Custom Properties

| Name | Description |
| --------------------- | -------------------------- |
| `--ino-img-list-cols` | sets the number of columns |
| Name | Description |
| --------------------- | -------------------------------------- |
| `--ino-img-list-cols` | Sets the number of columns. [number:3] |


----------------------------------------------
Expand Down
4 changes: 2 additions & 2 deletions packages/elements/src/components/ino-input-file/ino-input-file.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@

ino-input-file {
/**
* @prop --ino-input-file-box-height: Height of the drag and drop window
* @prop --ino-input-file-box-width: Width of the drag and drop window
* @prop --ino-input-file-box-height: Height of the drag and drop window. [size:300]
* @prop --ino-input-file-box-width: Width of the drag and drop window. [size]
*/
--input-file-box-height: var(--ino-input-file-box-height, 300px);
--input-file-box-width: var(--ino-input-file-box-width, 100%);
Expand Down
Loading
Loading