Skip to content

Commit

Permalink
Merge branch 'main' into fix/64-register-form-elements
Browse files Browse the repository at this point in the history
  • Loading branch information
Sukaato authored Dec 8, 2024
2 parents 38f708d + d3b3dcd commit d2ce426
Show file tree
Hide file tree
Showing 17 changed files with 193 additions and 54 deletions.
4 changes: 2 additions & 2 deletions packages/core/src/components/badge/badge.scss
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@

@mixin generate-color($colors...) {
@each $color in $colors {
$base: use_color("#{$color}.base");
$text: use_color("#{$color}.content");
$base: theme.use_color("#{$color}.base");
$text: theme.use_color("#{$color}.content");

:host([color="#{$color}"]) {
--border-color: #{$base};
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@
var(--background) 57%
);
background-repeat: no-repeat;
background-color: var(--background, theme.use_color("base.content"));
background-color: var(--background, #{theme.use_color("base.content")});
animation: checkmark var(--animation-duration, 0.2s) ease-out;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/divider/divider.scss
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@

@mixin generate-color($colors...) {
@each $color in $colors {
$base: use_color("#{$color}.base");
$base: theme.use_color("#{$color}.base");

:host([color="#{$color}"]) {
--background: #{$base};
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/dropdown/dropdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
&-backdrop {
position: fixed;
inset: 0;
background: use_color("neutral.base", 0.2);
background: theme.use_color("neutral.base", 0.2);
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions packages/core/src/components/input-file/input-file.scss
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,8 @@ $minWidth: 12rem;

@mixin generate-color($colors...) {
@each $color in $colors {
$base: use_color("#{$color}.base");
$text: use_color("#{$color}.content");
$base: theme.use_color("#{$color}.base");
$text: theme.use_color("#{$color}.content");

:host([color="#{$color}"]) {
--button-background: #{$base};
Expand All @@ -167,7 +167,7 @@ $minWidth: 12rem;
@include generate-color(primary, secondary, accent, info, success, warning, error);

:host(:not([color], [disabled])) {
$color: use_color("neutral.base");
$color: theme.use_color("neutral.base");

> input:hover {
--button-background: color-mix(in oklab, #{$color} 90%, black);
Expand All @@ -189,9 +189,9 @@ $minWidth: 12rem;
// ----------------------------------------------------------------

:host([disabled]) {
$background: use_color("base.200");
$color: use_color("base.content", 0.2);
$btn-background: use_color("neutral.base", 0.2);
$background: theme.use_color("base.200");
$color: theme.use_color("base.content", 0.2);
$btn-background: theme.use_color("neutral.base", 0.2);

--background: #{$background};
--border-color: #{$background};
Expand Down
23 changes: 12 additions & 11 deletions packages/core/src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ $minWidth: 12rem;
--border-radius: #{theme.use_radius(md)};
--border-color: transparent;
--outline-color: #{theme.use_color("base.content", 0.2)};
--background: #{theme.use_color("base.100")};
--background: #{theme.use_color("base.100", var(--opacity, 1))};
--color: #{theme.use_color("base.content")};

@include input.label;
Expand Down Expand Up @@ -69,6 +69,8 @@ $minWidth: 12rem;

font-family: theme.use_font();
white-space: pre-wrap;
text-overflow: ellipsis;
text-wrap: auto;

cursor: inherit;

Expand Down Expand Up @@ -130,7 +132,7 @@ $minWidth: 12rem;

@mixin generate-color($colors...) {
@each $color in $colors {
$base: use_color("#{$color}.base");
$base: theme.use_color("#{$color}.base");

:host([color="#{$color}"]) {
--border-color: #{$base};
Expand All @@ -142,19 +144,18 @@ $minWidth: 12rem;

:host([color="ghost"]) {
--opacity: 0.05;

> .input-wrapper:has(input:focus) {
--opacity: 1;
}
}
:host([color="ghost"]:focus) {
--opacity: 1;
}

// Input State
// ----------------------------------------------------------------

:host([readonly]) {
$base: use_color("base.200");
$neutral: use_color("neutral.base");
$text: use_color("base.content", 0.8);
$base: theme.use_color("base.200");
$neutral: theme.use_color("neutral.base");
$text: theme.use_color("base.content", 0.8);

--background: #{$base};
--border-color: #{$neutral};
Expand All @@ -168,8 +169,8 @@ $minWidth: 12rem;
}

:host([disabled]) {
$base: use_color("base.200");
$text: use_color("base.content");
$base: theme.use_color("base.200");
$text: theme.use_color("base.content");

--background: #{$base};
--border-color: #{$base};
Expand Down
4 changes: 3 additions & 1 deletion packages/core/src/components/input/input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ let inputIds = 0;
@Component({
tag: 'pop-input',
styleUrl: 'input.scss',
shadow: true,
shadow: {
delegatesFocus: true,
},
formAssociated: true,
})
export class Input implements ComponentInterface, FormAssociatedInterface {
Expand Down
92 changes: 92 additions & 0 deletions packages/core/src/components/input/tests/basic/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Basic | Poppy-ui</title>
<link rel="stylesheet" href="/dist/poppy/poppy.css">
<script type="module" src="/dist/poppy/poppy.esm.js"></script>
<script nomodule src="/dist/poppy/poppy.js"></script>
<style>
main {
width: 100vw;
height: 100dvh;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;

background-color: var(--base-300);
}
section {
display: flex;
flex-direction: column;
justify-content: center;
gap: .35rem;
}
div {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
</style>
</head>
<body>
<main>
<section>
<h2>Input - basic</h2>
<div>
<pop-input>no color</pop-input>
<pop-input color="primary">primary</pop-input>
<pop-input color="secondary">secondary</pop-input>
<pop-input color="accent">accent</pop-input>
<pop-input color="info">info</pop-input>
<pop-input color="success">success</pop-input>
<pop-input color="warning">warning</pop-input>
<pop-input color="error" error-text="test">error</pop-input>
<pop-input color="ghost">ghost</pop-input>
</div>
</section>
<section>
<h2>Input - outlined</h2>
<div>
<pop-input outlined>no color</pop-input>
<pop-input outlined color="primary">primary</pop-input>
<pop-input outlined color="secondary">secondary</pop-input>
<pop-input outlined color="accent">accent</pop-input>
<pop-input outlined color="info">info</pop-input>
<pop-input outlined color="success">success</pop-input>
<pop-input outlined color="warning">warning</pop-input>
<pop-input outlined color="error">error</pop-input>
</div>
</section>
<section>
<h2>Button - disabled (basic)</h2>
<div>
<pop-input disabled>no color</pop-input>
<pop-input disabled color="primary">primary</pop-input>
<pop-input disabled color="secondary">secondary</pop-input>
<pop-input disabled color="accent">accent</pop-input>
<pop-input disabled color="info">info</pop-input>
<pop-input disabled color="success">success</pop-input>
<pop-input disabled color="warning">warning</pop-input>
<pop-input disabled color="error">error</pop-input>
<pop-input disabled color="ghost">ghost</pop-input>
</div>
</section>
<section>
<h2>Button - outlined disabled</h2>
<div>
<pop-input outlined disabled>no color</pop-input>
<pop-input outlined disabled color="primary">primary</pop-input>
<pop-input outlined disabled color="secondary">secondary</pop-input>
<pop-input outlined disabled color="accent">accent</pop-input>
<pop-input outlined disabled color="info">info</pop-input>
<pop-input outlined disabled color="success">success</pop-input>
<pop-input outlined disabled color="warning">warning</pop-input>
<pop-input outlined disabled color="error">error</pop-input>
</div>
</section>
</main>
</body>
</html>
46 changes: 46 additions & 0 deletions packages/core/src/components/input/tests/text/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Basic | Poppy-ui</title>
<link rel="stylesheet" href="/dist/poppy/poppy.css">
<script type="module" src="/dist/poppy/poppy.esm.js"></script>
<script nomodule src="/dist/poppy/poppy.js"></script>
<style>
main {
width: 100vw;
height: 100dvh;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;

background-color: var(--base-300);
}
section {
display: flex;
flex-direction: column;
justify-content: center;
gap: .35rem;
}
div {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
</style>
</head>
<body>
<main>
<section>
<h2>Input - basic</h2>
<div>
<pop-input color="primary" helper-text="helper">helper</pop-input>
<pop-input color="primary" error-text="error">error</pop-input>
<pop-input color="primary" helper-text="helper" error-text="error">helper + error</pop-input>
</div>
</section>
</main>
</body>
</html>
15 changes: 8 additions & 7 deletions packages/core/src/components/item/item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,14 @@
:host(:not(.has-list)) > {
.item-inner:is(:hover, :focus),
.item-inner:has(:focus) {
background-color: use_color("base.content", 0.1);
background-color: theme.use_color("base.content", 0.1);
color: inherit;
}
}

:host > .item-inner:active {
background-color: use_color("neutral.base");
color: use_color("neutral.content");
background-color: theme.use_color("neutral.base");
color: theme.use_color("neutral.content");
}

// Item context
Expand All @@ -59,30 +59,31 @@
:host(.in-list-md) > .item-inner {
height: 36px;
padding: 0.5rem 1rem;
border-radius: use_radius(md);
border-radius: theme.use_radius(md);
border-radius: theme.use_radius(md);

font-size: 0.875rem;
line-height: 1.25rem;
}
:host(.in-list-xs) > .item-inner {
height: 24px;
padding: 0.25rem 0.5rem;
border-radius: use_radius(sm);
border-radius: theme.use_radius(sm);

font-size: 0.75rem;
line-height: 1rem;
}
:host(.in-list-sm) > .item-inner {
height: 28px;
padding: 0.25rem 0.75rem;
border-radius: use_radius(md);
border-radius: theme.use_radius(md);

font-size: 0.875rem;
line-height: 1.25rem;
}
:host(.in-list-lg) > .item-inner {
height: 52px;
border-radius: use_radius(md);
border-radius: theme.use_radius(md);

font-size: 1.125rem;
line-height: 1.75rem;
Expand Down
Loading

0 comments on commit d2ce426

Please sign in to comment.