Skip to content

Commit

Permalink
feat: Updates to showcase and use BEM for variable names (#31)
Browse files Browse the repository at this point in the history 
Co-authored-by: Anand Gorantala <[email protected]>
  • Loading branch information
@anandgorantala
anandgorantala and anandgorantala authored Nov 19, 2024
1 parent 8501d8b commit 793f363
Show file tree
Hide file tree
Showing 19 changed files with 211 additions and 206 deletions.
16 changes: 8 additions & 8 deletions src/components/checkbox-group/checkbox-group.properties.scss
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
@import url("../theme/theme.properties.scss");

@property --lui-checkbox-size {
@property --lui-checkbox__size {
syntax: "*";
inherits: true;
initial-value: 20px;
};

@property --lui-checkbox-font-size {
@property --lui-checkbox__font-size {
syntax: "*";
inherits: true;
initial-value: 0.875rem;
};

@property --lui-checkbox-background {
@property --lui-checkbox__background {
syntax: "*";
inherits: true;
initial-value: transparent;
};

@property --lui-checkbox-active-background {
@property --lui-checkbox__background--active {
syntax: "*";
inherits: true;
initial-value: #3e63dd;
};

@property --lui-checkbox-indicator-color {
@property --lui-checkbox__indicator-color {
syntax: "<color>";
inherits: true;
initial-value: white;
};

@property --lui-checkbox-indicator-size {
@property --lui-checkbox__indicator-size {
syntax: "*";
inherits: true;
initial-value: 20px;
};

@property --lui-checkbox-border-radius {
@property --lui-checkbox__border-radius {
syntax: "*";
inherits: true;
initial-value: 4px;
};

@property --lui-cg-overflow-trigger-color {
@property --lui-cg__overflow-trigger-color {
syntax: "<color>";
inherits: true;
initial-value: #3e63dd;
Expand Down
25 changes: 13 additions & 12 deletions src/components/checkbox-group/checkbox-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,27 @@
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--lui-checkbox-font-size);
font-size: var(--lui-checkbox__font-size);
cursor: pointer;
}

.lui-cg-item-checkbox {
background: var(--lui-checkbox-background);
width: var(--lui-checkbox-size);
height: var(--lui-checkbox-size);
border-radius: var(--lui-checkbox-border-radius);
background: var(--lui-checkbox__background);
width: var(--lui-checkbox__size);
height: var(--lui-checkbox__size);
border-radius: var(--lui-checkbox__border-radius);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #bdcee3;
position: relative;
cursor: pointer;
padding: 0;
}

.lui-cg-item-checkbox:where([data-state=checked]) {
background: var(--lui-checkbox-active-background);
border: 1px solid var(--lui-checkbox-active-background);
background: var(--lui-checkbox__background--active);
border: 1px solid var(--lui-checkbox__background--active);
}

.lui-cg-item-checkbox:where(:not([data-state=checked])):hover {
Expand All @@ -39,12 +40,12 @@

.lui-cg-item-checkbox-indicator {
position: absolute;
width: var(--lui-checkbox-indicator-size);
height: var(--lui-checkbox-indicator-size);
width: var(--lui-checkbox__indicator-size);
height: var(--lui-checkbox__indicator-size);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
color: var(--lui-checkbox-indicator-color);
color: var(--lui-checkbox__indicator-color);
}

.lui-cg-overflow-container {
Expand All @@ -69,10 +70,10 @@

.lui-cg-overflow-trigger {
background: transparent;
color: var(--lui-cg-overflow-trigger-color);
color: var(--lui-cg__overflow-trigger-color);
border: 0;
padding: 0;
font-size: var(--lui-checkbox-font-size);;
font-size: var(--lui-checkbox__font-size);;
font-weight: 600;
cursor: pointer;
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/checkbox-group/checkbox-group.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ export const Themes: Story = {
<div style={{display: 'flex', gap: '2rem'}}>
<Theme style={{
width: '200px',
'--lui-checkbox-active-background': 'rebeccapurple',
'--lui-cg-overflow-trigger-color': 'rebeccapurple',
'--lui-checkbox__background--active': 'rebeccapurple',
'--lui-cg__overflow-trigger-color': 'rebeccapurple',
} as CSSProperties}>
<CheckboxGroup.Root {...args} value={value} onChange={setValue}>
<CheckboxGroup.Item value="red">Red</CheckboxGroup.Item>
Expand All @@ -121,8 +121,8 @@ export const Themes: Story = {
</Theme>
<Theme style={{
width: '200px',
'--lui-checkbox-active-background': 'linear-gradient( 226.4deg, rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
'--lui-cg-overflow-trigger-color': 'rebeccapurple',
'--lui-checkbox__background--active': 'linear-gradient( 226.4deg, rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
'--lui-cg__overflow-trigger-color': 'rebeccapurple',
} as CSSProperties}>
<CheckboxGroup.Root {...args} value={value} onChange={setValue}>
<CheckboxGroup.Item value="red">Red</CheckboxGroup.Item>
Expand Down
6 changes: 3 additions & 3 deletions src/components/pagination/pagination.properties.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@
initial-value: transparent;
};

@property --lui-pagination__item--active-background {
@property --lui-pagination__item-background--active {
syntax: "*";
inherits: true;
initial-value: #3e63dd;
};

@property --lui-pagination__item--hover-background {
@property --lui-pagination__item-background--hover {
syntax: "*";
inherits: true;
initial-value: #f7f9fc;
Expand All @@ -34,7 +34,7 @@
initial-value: black;
};

@property --lui-pagination__item--active-color {
@property --lui-pagination__item-color--active {
syntax: "<color>";
inherits: true;
initial-value: #fff;
Expand Down
18 changes: 9 additions & 9 deletions src/components/pagination/pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

.lui-pagination__summary {
font-size: 0.875rem;
color: var(--lui-text--subtl-color);
color: var(--lui-base__subtl-color);
}

.lui-pagination__navigation__button {
Expand All @@ -51,17 +51,17 @@
}

.lui-pagination__navigation__button:not(:disabled):hover {
background: var(--lui-pagination__item--hover-background);
background: var(--lui-pagination__item-background--hover);
}

.lui-pagination__navigation__item:not(:disabled):hover {
background: var(--lui-pagination__item--hover-background);
background: var(--lui-pagination__item-background--hover);
}

.lui-pagination__navigation__item--selected,
.lui-pagination__navigation__item--selected:hover {
background: var(--lui-pagination__item--active-background);
color: var(--lui-pagination__item--active-color);
background: var(--lui-pagination__item-background--active);
color: var(--lui-pagination__item-color--active);
cursor: not-allowed;
}
}
Expand Down Expand Up @@ -92,15 +92,15 @@
background: var(--lui-pagination__item-background);
font-size: 0.875rem;
&:hover {
background: var(--lui-pagination__item--hover-background);
background: var(--lui-pagination__item-background--hover);
}
}

.lui-pagination__select-menu-item--selected {
background: var(--lui-pagination__item--active-background);
color: var(--lui-pagination__item--active-color);
background: var(--lui-pagination__item-background--active);
color: var(--lui-pagination__item-color--active);
&:hover {
background-color: var(--lui-pagination__item--active-background);
background-color: var(--lui-pagination__item-background--active);
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/pagination/pagination.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ export const Themes: Story = {
<div style={{display: 'flex', gap: '2rem', flexDirection: 'column'}}>
<Theme
style={{
'--lui-pagination__item--active-background': 'rebeccapurple',
'--lui-pagination__item-background--active': 'rebeccapurple',
} as CSSProperties}
>
<Pagination.Root
Expand All @@ -272,8 +272,8 @@ export const Themes: Story = {

<Theme
style={{
'--lui-base-font-family': 'Comic Sans MS, Textile, Cursive',
'--lui-pagination__item--active-background': 'linear-gradient( 226.4deg, rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
'--lui-base__font-family': 'Comic Sans MS, Textile, Cursive',
'--lui-pagination__item-background--active': 'linear-gradient( 226.4deg, rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )',
} as CSSProperties}
>
<Pagination.Root
Expand Down
30 changes: 15 additions & 15 deletions src/components/product-card/product-card.properties.scss
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,90 @@
@import url("../theme/theme.properties.scss");

@property --lui-pc-color {
@property --lui-pc__color {
syntax: "<color>";
inherits: true;
initial-value: inherit;
};

@property --lui-pc-bg {
@property --lui-pc__background {
syntax: "*";
inherits: true;
initial-value: inherit;
};

@property --lui-pc-container-padding {
@property --lui-pc__container-padding {
syntax: "*";
inherits: true;
initial-value: 0.5rem;
};

@property --lui-pc-border-radius {
@property --lui-pc__border-radius {
syntax: "*";
inherits: true;
initial-value: 6px;
};

@property --lui-pc-title-font-size {
@property --lui-pc__title-font-size {
syntax: "*";
inherits: true;
initial-value: 0.875rem;
};

@property --lui-pc-btn-bg {
@property --lui-pc__btn-background {
syntax: "*";
inherits: true;
initial-value: gold;
};

@property --lui-pc-btn-border-color {
@property --lui-pc__btn-border-color {
syntax: "<color>";
inherits: true;
initial-value: gold;
};

@property --lui-pc-btn-color {
@property --lui-pc__btn-color {
syntax: "<color>";
inherits: true;
initial-value: black;
};

@property --lui-pc-badge-color {
@property --lui-pc__badge-color {
syntax: "<color>";
inherits: true;
initial-value: #00462a;
};

@property --lui-pc-badge-bg {
@property --lui-pc__badge-background {
syntax: "*";
inherits: true;
initial-value: #e6f3ed;
};

@property --lui-pc-box-shadow {
@property --lui-pc__box-shadow {
syntax: "*";
inherits: true;
initial-value: none;
};

@property --lui-pc-favorite-btn-size {
@property --lui-pc__favorite-btn-size {
syntax: "*";
inherits: true;
initial-value: 1.5rem;
};

@property --lui-pc-favorite-btn-position-offset {
@property --lui-pc__favorite-btn-position-offset {
syntax: "*";
inherits: true;
initial-value: 0.75rem;
};

@property --lui-pc-favorite-btn-color {
@property --lui-pc__favorite-btn-color {
syntax: "<color>";
inherits: true;
initial-value: white;
};

@property --lui-pc-favorite-btn-color--active {
@property --lui-pc__favorite-btn-color--active {
syntax: "<color>";
inherits: true;
initial-value: crimson;
Expand Down
Loading

0 comments on commit 793f363

Please sign in to comment.