Skip to content

Commit

Permalink
feat: spec improvements
Browse files Browse the repository at this point in the history 
closes feat morfeojs#109
  • Loading branch information
@andreaSimonePorceddu
andreaSimonePorceddu committed Nov 5, 2021
1 parent a4c5503 commit 71d83f4
Show file tree
Hide file tree
Showing 39 changed files with 868 additions and 821 deletions.
6 changes: 3 additions & 3 deletions devtool/src/_shared/components/Accordion/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,21 @@ export const Accordion: React.FC<Props> = ({
<Icon
name="chevron.right"
size="s"
color={'invertedTextColor' as Color}
color={'invertedText' as Color}
className={styles.toggle}
/>
<div className={styles.titleContainer}>
{icon && (
<Icon
name={icon}
size="s"
color={'invertedTextColor' as Color}
color={'invertedText' as Color}
className={styles.icon}
/>
)}
<h2
className="morfeo-typography-h2"
style={{ color: 'var(--color-inverted-text-color)' }}
style={{ color: 'var(--color-inverted-text)' }}
>
{label}
</h2>
Expand Down
5 changes: 3 additions & 2 deletions devtool/src/_shared/components/Accordion/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@
.toggle {
transform: rotate(0deg);
transition: var(--transitions-fast);
margin-right: var(--spacings-xxs);
margin-right: var(--spacings-2xs);
transform-origin: center center;
}

.open .toggle {
transform: rotate(90deg);
}

.icon {
margin-right: var(--spacings-xxs);
margin-right: var(--spacings-2xs);
}

.titleContainer {
Expand Down
6 changes: 3 additions & 3 deletions devtool/src/_shared/components/CodeSnippets/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
cursor: pointer;
height: var(--sizes-m);
transition: var(--transitions-fast);
padding-top: var(--spacings-xxs);
padding-top: var(--spacings-2xs);
padding-left: var(--spacings-xs);
margin-right: calc(var(--spacings-xxs) / 2);
margin-right: calc(var(--spacings-2xs) / 2);
padding-right: var(--spacings-xs);
background-color: var(--colors-gray-dark);
border-top-left-radius: var(--radii-m);
Expand All @@ -28,7 +28,7 @@
}

.tabLabel {
color: var(--colors-inverted-text-color) !important;
color: var(--colors-inverted-text) !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Expand Down
2 changes: 1 addition & 1 deletion devtool/src/_shared/components/CopyButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const CopyButton: React.FC<Props> = ({
<Icon
name={isCopied ? 'check' : 'copy'}
size="xs"
color={'invertedTextColor' as Color}
color={'invertedText' as Color}
className={styles.icon}
/>
</div>
Expand Down
8 changes: 4 additions & 4 deletions devtool/src/_shared/components/CopyButton/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
display: flex;
width: var(--spacings-s);
height: var(--spacings-s);
padding-left: calc(var(--spacings-xxs) / 2);
padding-right: calc(var(--spacings-xxs) / 2);
padding-left: calc(var(--spacings-2xs) / 2);
padding-right: calc(var(--spacings-2xs) / 2);
overflow: hidden;
align-items: center;
justify-content: center;
Expand All @@ -21,7 +21,7 @@
}

.copyButton p {
color: var(--colors-inverted-text-color) !important;
color: var(--colors-inverted-text) !important;
max-width: 0;
position: absolute;
opacity: 0;
Expand All @@ -37,7 +37,7 @@
.copyButton:hover p, .copyButton.copied p {
opacity: 1;
position: relative;
margin-right: var(--spacings-xxs);
margin-right: var(--spacings-2xs);
max-width: 10rem;
}

Expand Down
4 changes: 2 additions & 2 deletions devtool/src/_shared/components/DropDown/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const DropDown: React.FC<Props> = ({
className={styles.option}
onClick={getOnClick(optionValue)}
>
<h4 className="morfeo-typography-h4 color-text-color ml-xs">
<h4 className="morfeo-typography-h4 color-text ml-xs">
{optionLabel}
</h4>
</div>
Expand All @@ -75,7 +75,7 @@ export const DropDown: React.FC<Props> = ({
{value || placeholder}
<Icon
name="chevron.right"
color={(inverted ? 'invertedTextColor' : 'textColor') as Color}
color={(inverted ? 'invertedText' : 'text') as Color}
size="xs"
className={styles.toggle}
/>
Expand Down
18 changes: 9 additions & 9 deletions devtool/src/_shared/components/DropDown/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@
}

.title {
color: var(--colors-inverted-text-color) !important;
color: var(--colors-inverted-text) !important;
}

.inverted .title {
color: var(--colors-text-color) !important;
color: var(--colors-text) !important;
}

.button {
Expand All @@ -29,12 +29,12 @@
}

.inverted .button {
color: var(--colors-inverted-text-color) !important;
color: var(--colors-inverted-text) !important;
background-color: var(--colors-primary) !important;
}

.toggle {
margin-left: var(--spacings-xxs);
margin-left: var(--spacings-2xs);
transition: var(--transitions-fast);
transform: rotate(90deg);
}
Expand All @@ -52,9 +52,9 @@
display: flex;
overflow: scroll;
flex-direction: column;
bottom: calc(var(--spacings-xxs) * -1);
bottom: calc(var(--spacings-2xs) * -1);
position: absolute;
z-index: var(--z-indices-medium);
z-index: var(--z-indices-low);
justify-content: flex-start;
align-items: flex-start;
transform: translateY(100%);
Expand All @@ -72,15 +72,15 @@
align-items: center;
justify-content: flex-start;
position: relative;
padding-top: var(--spacings-xxs);
padding-bottom: var(--spacings-xxs);
padding-top: var(--spacings-2xs);
padding-bottom: var(--spacings-2xs);
}

.option::after {
content: "";
position: absolute;
width: 60%;
height: var(--border-widths-xxs);
height: var(--border-widths-2xs);
background-color: var(--colors-gray-lighter);
bottom: 0;
left: 50%;
Expand Down
2 changes: 1 addition & 1 deletion devtool/src/_shared/components/Slices/Components/Detail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const Detail = () => {
{devtoolConfig?.style && (
<div className={styles.defaultStyleAlertContainer}>
<input type="checkbox" checked={defaultStyleActive} onChange={onDefaultStyleCheckboxChange} />
<div className="ml-xxs">
<div className="ml-2xs">
<Icon name="warning" />
</div>
<h4 className="morfeo-typography-h4">
Expand Down
8 changes: 4 additions & 4 deletions devtool/src/_shared/components/Slices/Components/Detail/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@
.defaultStyleAlertContainer {
display: flex;
align-items: center;
margin-bottom: var(--spacings-xxs);
margin-bottom: var(--spacings-2xs);
}

.icon {
margin-right: var(--spacings-xxs);
margin-right: var(--spacings-2xs);
}

.previewContainer {
width: 100%;
padding-top: var(--spacings-xxl);
padding-bottom: var(--spacings-xxl);
padding-top: var(--spacings-2xl);
padding-bottom: var(--spacings-2xl);
margin-bottom: var(--spacings-l);
display: flex;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion devtool/src/_shared/components/Slices/Components/Tags/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
}

.tag {
color: var(--colors-inverted-text-color) !important;
color: var(--colors-inverted-text) !important;
font-weight: bold;
}
4 changes: 2 additions & 2 deletions devtool/src/_shared/components/Slices/Components/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@
}

.componentName {
color: var(--colors-inverted-text-color) !important;
color: var(--colors-inverted-text) !important;
max-width: 10rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.tag {
color: var(--colors-inverted-text-color) !important;
color: var(--colors-inverted-text) !important;
font-weight: bold;
}
4 changes: 2 additions & 2 deletions devtool/src/_shared/components/Slices/Radii/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ const RadiusCard: React.FC<Props> = ({ corner, value }) => {
style={
{
corner,
size: 'var(--sizes-xxl)',
size: 'var(--sizes-2xl)',
bg: 'var(--colors-primary)',
} as any
}
>
<h4
className="morfeo-typography-h4"
style={{ color: 'var(--colors-inverted-text-color)' }}
style={{ color: 'var(--colors-inverted-text)' }}
>
{value}
</h4>
Expand Down
4 changes: 2 additions & 2 deletions devtool/src/_shared/components/Slices/Shadows/Detail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export const Detail: React.FC = () => {
style={
{
shadow: detailKey as Shadow,
size: 'var(--sizes-xxl)',
corner: 'var(--radii-xxs)',
size: 'var(--sizes-2xl)',
corner: 'var(--radii-2xs)',
bg: 'var(--colors-primary)',
} as any
}
Expand Down
2 changes: 1 addition & 1 deletion devtool/src/_shared/components/Slices/Shadows/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const ItemCard: React.FC<Props> = ({ shadow }) => {
{
shadow,
size: 'var(--sizes-xl)',
corner: 'var(--radii-xxs)',
corner: 'var(--radii-2xs)',
bg: 'var(--colors-primary)',
} as any
}
Expand Down
8 changes: 4 additions & 4 deletions devtool/src/_shared/components/Slices/Spacings/Detail/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@
}
.value::after, .value::before {
width: var(--sizes-s);
color: var(--colors-text-color);
color: var(--colors-text);
transition: var(--transitions-fast);
font-size: var(--font-sizes-m);
font-family: var(--fonts-regular);
font-family: var(--fonts-default);
font-weight: var(--font-weights-bold);
line-height: var(--line-heights-heading);
}

.value::after {
content: '→';
margin-left: calc(var(--spacings-xxs) / 2);
margin-left: calc(var(--spacings-2xs) / 2);
}

.value::before {
content: '←';
margin-right: calc(var(--spacings-xxs) / 2);
margin-right: calc(var(--spacings-2xs) / 2);
}
2 changes: 1 addition & 1 deletion devtool/src/_shared/components/Slices/_shared/ListItemCard/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: var(--spacings-xxs);
padding-top: var(--spacings-2xs);
}
Loading

0 comments on commit 71d83f4

Please sign in to comment.