Merge branch 'master' into canon-radiogroup
This commit is contained in:
Charles de Dreuille
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/canon': patch
|
||||
---
|
||||
|
||||
We are consolidating all css files into a single styles.css in Canon.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/canon': patch
|
||||
---
|
||||
|
||||
Added placeholder prop to TextField component.
|
||||
File diff suppressed because one or more lines are too long
@@ -5,10 +5,8 @@ const { bundle } = require('lightningcss');
|
||||
const source = '../../packages/canon/src/css';
|
||||
const destination = '../public';
|
||||
|
||||
const source1 = path.join(__dirname, `${source}/core.css`);
|
||||
const destination1 = path.join(__dirname, `${destination}/core.css`);
|
||||
const source2 = path.join(__dirname, `${source}/components.css`);
|
||||
const destination2 = path.join(__dirname, `${destination}/components.css`);
|
||||
const source1 = path.join(__dirname, `${source}/styles.css`);
|
||||
const destination1 = path.join(__dirname, `${destination}/styles.css`);
|
||||
|
||||
// Function to bundle and copy the CSS file
|
||||
const bundleAndCopyFile = async (source, destination) => {
|
||||
@@ -26,10 +24,7 @@ const bundleAndCopyFile = async (source, destination) => {
|
||||
};
|
||||
|
||||
// Initial bundle and copy
|
||||
Promise.all([
|
||||
bundleAndCopyFile(source1, destination1),
|
||||
bundleAndCopyFile(source2, destination2),
|
||||
])
|
||||
Promise.all([bundleAndCopyFile(source1, destination1)])
|
||||
.then(() => {
|
||||
// Add an empty line after all operations are complete - It looks better in the terminal :)
|
||||
console.log('');
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
.canon-AvatarRoot {
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
color: var(--canon-fg-primary);
|
||||
background-color: var(--canon-bg-surface-2);
|
||||
border-radius: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canon-AvatarRoot[data-size="small"] {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.canon-AvatarRoot[data-size="medium"] {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.canon-AvatarRoot[data-size="large"] {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.canon-AvatarImage {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.canon-AvatarFallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--canon-font-size-3);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border);
|
||||
border-radius: var(--canon-radius-full);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
.canon-Box {
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-fg-primary);
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
.canon-Button {
|
||||
user-select: none;
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
cursor: pointer;
|
||||
border-radius: var(--canon-radius-2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--canon-space-1_5);
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-Button[data-variant="primary"] {
|
||||
background-color: var(--canon-bg-solid);
|
||||
color: var(--canon-fg-solid);
|
||||
transition: background-color .15s, box-shadow .15s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--canon-bg-solid-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--canon-bg-solid-pressed);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--canon-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--canon-bg-solid-disabled);
|
||||
color: var(--canon-fg-solid-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.canon-Button[data-variant="secondary"] {
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border);
|
||||
color: var(--canon-fg-primary);
|
||||
transition: box-shadow .15s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-pressed);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--canon-ring);
|
||||
outline: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
|
||||
color: var(--canon-fg-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.canon-Button[data-size="medium"] {
|
||||
font-size: var(--canon-font-size-4);
|
||||
padding: 0 var(--canon-space-3);
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.canon-Button[data-size="small"] {
|
||||
font-size: var(--canon-font-size-3);
|
||||
padding: 0 var(--canon-space-2);
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.canon-Button[data-size="small"] svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.canon-Button[data-size="medium"] svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
.canon-ButtonIcon {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.canon-ButtonIcon[data-size="small"] {
|
||||
width: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.canon-ButtonIcon[data-size="medium"] {
|
||||
width: 2.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
.canon-CheckboxRoot {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border);
|
||||
cursor: pointer;
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
transition: background-color .2s ease-in-out;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-CheckboxRoot:focus-visible {
|
||||
outline: 2px solid var(--canon-ring);
|
||||
outline-offset: 2px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.canon-CheckboxRoot[data-checked] {
|
||||
background-color: var(--canon-bg-solid);
|
||||
box-shadow: none;
|
||||
color: var(--canon-fg-solid);
|
||||
}
|
||||
|
||||
.canon-CheckboxLabel {
|
||||
align-items: center;
|
||||
gap: var(--canon-space-2);
|
||||
font-size: var(--canon-font-size-3);
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-fg-primary);
|
||||
user-select: none;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
& .canon-CheckboxRoot:not([data-checked]) {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canon-CheckboxIndicator {
|
||||
color: var(--canon-fg-solid);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
.canon-CollapsiblePanel {
|
||||
height: var(--collapsible-panel-height);
|
||||
transition: all .15s ease-out;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
&[data-starting-style], &[data-ending-style] {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,18 +0,0 @@
|
||||
.canon-Container {
|
||||
max-width: 120rem;
|
||||
padding-inline: var(--canon-space-4);
|
||||
margin-inline: auto;
|
||||
transition: padding .2s ease-in-out;
|
||||
}
|
||||
|
||||
@media (width >= 640px) {
|
||||
.canon-Container {
|
||||
padding-inline: var(--canon-space-8);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
.canon-Container {
|
||||
padding-inline: var(--canon-space-12);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,23 +0,0 @@
|
||||
.canon-DataTablePagination {
|
||||
padding-top: var(--canon-space-5);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-DataTablePagination--left {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-DataTablePagination--right {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--canon-space-2);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-DataTablePagination--select {
|
||||
min-width: 10.5rem;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
.canon-FieldLabel {
|
||||
margin-bottom: var(--canon-space-3);
|
||||
gap: var(--canon-space-1);
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-FieldLabelLabel {
|
||||
color: var(--canon-fg-primary);
|
||||
cursor: pointer;
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
font-size: var(--canon-font-size-2);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.canon-FieldLabelSecondaryLabel {
|
||||
color: var(--canon-fg-secondary);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
margin-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.canon-FieldLabelDescription {
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
font-size: var(--canon-font-size-2);
|
||||
color: var(--canon-fg-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
.canon-Flex {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.canon-Grid {
|
||||
display: grid;
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
.canon-Heading {
|
||||
font-family: var(--canon-font-regular);
|
||||
color: var(--canon-fg-primary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.canon-Heading[data-variant="display"] {
|
||||
font-size: var(--canon-font-size-10);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
.canon-Heading[data-variant="title1"] {
|
||||
font-size: var(--canon-font-size-9);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
.canon-Heading[data-variant="title2"] {
|
||||
font-size: var(--canon-font-size-8);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
.canon-Heading[data-variant="title3"] {
|
||||
font-size: var(--canon-font-size-7);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
.canon-Heading[data-variant="title4"] {
|
||||
font-size: var(--canon-font-size-6);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
.canon-Heading[data-variant="title5"] {
|
||||
font-size: var(--canon-font-size-5);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
.canon-Heading[data-color="primary"] {
|
||||
color: var(--canon-fg-primary);
|
||||
}
|
||||
|
||||
.canon-Heading[data-color="secondary"] {
|
||||
color: var(--canon-fg-secondary);
|
||||
}
|
||||
|
||||
.canon-Heading[data-truncate] {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
.canon-Icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
.canon-IconButton {
|
||||
user-select: none;
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
cursor: pointer;
|
||||
border-radius: var(--canon-radius-2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--canon-space-1_5);
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-IconButton[data-variant="primary"] {
|
||||
background-color: var(--canon-bg-solid);
|
||||
color: var(--canon-fg-solid);
|
||||
transition: background-color .15s, box-shadow .15s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--canon-bg-solid-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--canon-bg-solid-pressed);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--canon-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--canon-bg-solid-disabled);
|
||||
color: var(--canon-fg-solid-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.canon-IconButton[data-variant="secondary"] {
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border);
|
||||
color: var(--canon-fg-primary);
|
||||
transition: box-shadow .15s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-pressed);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--canon-ring);
|
||||
outline: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
|
||||
color: var(--canon-fg-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.canon-IconButton[data-size="medium"] {
|
||||
font-size: var(--canon-font-size-4);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.canon-IconButton[data-size="small"] {
|
||||
font-size: var(--canon-font-size-3);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
.canon-Link {
|
||||
font-family: var(--canon-font-regular);
|
||||
color: var(--canon-fg-link);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration-line: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--canon-fg-link-hover);
|
||||
text-underline-offset: calc(.025em + 2px);
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: min(2px, max(1px, .05em));
|
||||
text-decoration-color: color-mix(in srgb, var(--canon-fg-link-hover) 30%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.canon-Link[data-variant="body"] {
|
||||
font-size: var(--canon-font-size-3);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.canon-Link[data-variant="subtitle"] {
|
||||
font-size: var(--canon-font-size-4);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.canon-Link[data-variant="caption"] {
|
||||
font-size: var(--canon-font-size-2);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.canon-Link[data-variant="label"] {
|
||||
font-size: var(--canon-font-size-1);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.canon-Link[data-weight="regular"] {
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
|
||||
.canon-Link[data-weight="bold"] {
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
@@ -1,178 +0,0 @@
|
||||
.canon-MenuPositioner {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.canon-MenuPopup {
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
border: 1px solid var(--canon-border);
|
||||
color: var(--canon-fg-primary);
|
||||
transform-origin: var(--transform-origin);
|
||||
max-width: min(var(--available-width), 340px);
|
||||
max-height: min(var(--available-height), 500px);
|
||||
padding-bottom: var(--canon-space-1);
|
||||
border-radius: .375rem;
|
||||
outline: none;
|
||||
flex-direction: column;
|
||||
transition: transform .15s, opacity .15s;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
&[data-starting-style], &[data-ending-style] {
|
||||
opacity: 0;
|
||||
transform: scale(.9);
|
||||
}
|
||||
}
|
||||
|
||||
.canon-MenuItem {
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
gap: var(--canon-space-2);
|
||||
height: 32px;
|
||||
color: var(--canon-fg-primary);
|
||||
border-radius: var(--canon-radius-2);
|
||||
margin-inline: var(--canon-space-1);
|
||||
padding-inline: var(--canon-space-2);
|
||||
font-size: var(--canon-font-size-3);
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
|
||||
&:first-child {
|
||||
margin-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
&[data-highlighted] {
|
||||
background-color: var(--canon-gray-3);
|
||||
}
|
||||
}
|
||||
|
||||
.canon-MenuSubmenuTrigger {
|
||||
user-select: none;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--canon-space-2);
|
||||
height: 32px;
|
||||
color: var(--canon-fg-primary);
|
||||
border-radius: var(--canon-radius-2);
|
||||
margin-inline: var(--canon-space-1);
|
||||
padding-inline: var(--canon-space-2);
|
||||
font-size: var(--canon-font-size-3);
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
|
||||
& .canon-Icon {
|
||||
color: var(--canon-fg-secondary);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: var(--canon-space-1);
|
||||
}
|
||||
|
||||
&[data-popup-open], &[data-highlighted] {
|
||||
background-color: var(--canon-gray-3);
|
||||
|
||||
& .canon-Icon {
|
||||
color: var(--canon-fg-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canon-MenuSeparator {
|
||||
background-color: var(--color-gray-200);
|
||||
height: 1px;
|
||||
margin: .375rem 1rem;
|
||||
}
|
||||
|
||||
.canon-SubmenuComboboxSearch {
|
||||
padding-inline: var(--canon-space-3);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--canon-border);
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
color: var(--canon-fg-primary);
|
||||
line-height: 140%;
|
||||
font-size: var(--canon-font-size-3);
|
||||
z-index: 1;
|
||||
outline: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--canon-fg-secondary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-SubmenuComboboxItems {
|
||||
padding-top: var(--canon-space-2);
|
||||
outline: none;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.canon-SubmenuComboboxNoResults {
|
||||
padding-inline: var(--canon-space-3);
|
||||
padding-top: var(--canon-space-2);
|
||||
padding-bottom: var(--canon-space-4);
|
||||
color: var(--canon-fg-secondary);
|
||||
font-size: var(--canon-font-size-3);
|
||||
}
|
||||
|
||||
.canon-SubmenuComboboxItem {
|
||||
user-select: none;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--canon-space-2);
|
||||
height: 32px;
|
||||
color: var(--canon-fg-primary);
|
||||
border-radius: var(--canon-radius-2);
|
||||
margin-inline: var(--canon-space-1);
|
||||
padding-inline: var(--canon-space-2);
|
||||
font-size: var(--canon-font-size-3);
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
|
||||
&[data-highlighted] {
|
||||
background-color: var(--canon-gray-3);
|
||||
}
|
||||
|
||||
&[data-disabled] {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-SubmenuComboboxItemCheckbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--canon-fg-primary);
|
||||
border-radius: var(--canon-radius-2);
|
||||
border: 1px solid var(--canon-border);
|
||||
background: var(--canon-bg-surface-1);
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-SubmenuComboboxItemLabel {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
.canon-ScrollAreaRoot {
|
||||
box-sizing: border-box;
|
||||
width: 24rem;
|
||||
max-width: calc(100vw - 8rem);
|
||||
height: 8.5rem;
|
||||
}
|
||||
|
||||
.canon-ScrollAreaViewport {
|
||||
overscroll-behavior: contain;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.canon-ScrollAreaContent {
|
||||
padding-block: .75rem;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-ScrollAreaScrollbar {
|
||||
background-color: var(--canon-scrollbar);
|
||||
opacity: 0;
|
||||
border-radius: .375rem;
|
||||
justify-content: center;
|
||||
width: .25rem;
|
||||
margin: .5rem;
|
||||
transition: opacity .15s .3s;
|
||||
display: flex;
|
||||
|
||||
&[data-hovering], &[data-scrolling] {
|
||||
opacity: 1;
|
||||
transition-duration: 75ms;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 1.25rem;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-ScrollAreaThumb {
|
||||
border-radius: inherit;
|
||||
background-color: var(--canon-scrollbar-thumb);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
.canon-Select {
|
||||
font-family: var(--canon-font-regular);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-SelectLabel {
|
||||
font-size: var(--canon-font-size-2);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-fg-primary);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.canon-SelectLabel[data-disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.canon-SelectDescription {
|
||||
font-size: var(--canon-font-size-2);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-fg-secondary);
|
||||
padding-top: var(--canon-space-1_5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.canon-SelectError {
|
||||
font-size: var(--canon-font-size-2);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-fg-danger);
|
||||
padding-top: var(--canon-space-1_5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.canon-SelectTrigger {
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--canon-radius-3);
|
||||
border: 1px solid var(--canon-border);
|
||||
padding: 0 var(--canon-space-4);
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
font-size: var(--canon-font-size-3);
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-fg-primary);
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--canon-space-2);
|
||||
width: 100%;
|
||||
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-SelectTrigger::placeholder {
|
||||
color: var(--canon-fg-secondary);
|
||||
}
|
||||
|
||||
.canon-SelectTrigger:hover {
|
||||
border-color: var(--canon-border-hover);
|
||||
}
|
||||
|
||||
.canon-SelectTrigger:focus-visible {
|
||||
border-color: var(--canon-border-pressed);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.canon-SelectTrigger[data-invalid] {
|
||||
border-color: var(--canon-fg-danger);
|
||||
}
|
||||
|
||||
.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.canon-SelectTrigger[data-disabled] {
|
||||
cursor: not-allowed;
|
||||
border-color: var(--canon-border-disabled);
|
||||
color: var(--canon-fg-disabled);
|
||||
}
|
||||
|
||||
.canon-SelectTrigger[data-size="small"] {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.canon-SelectTrigger[data-size="medium"] {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.canon-SelectIcon {
|
||||
margin-left: var(--canon-space-5);
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.canon-SelectPopup {
|
||||
box-sizing: border-box;
|
||||
max-height: var(--available-height);
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
border: 1px solid var(--canon-border);
|
||||
border-radius: var(--canon-radius-3);
|
||||
padding-block: var(--canon-space-1);
|
||||
z-index: 1;
|
||||
transform-origin: var(--transform-origin);
|
||||
outline: 0;
|
||||
transition: transform .15s, opacity .15s;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 12px #0003;
|
||||
}
|
||||
|
||||
.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
|
||||
opacity: 0;
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
.canon-SelectItem {
|
||||
width: var(--anchor-width);
|
||||
padding-block: var(--canon-space-2);
|
||||
padding-inline: var(--canon-space-4);
|
||||
color: var(--canon-fg-primary);
|
||||
border-radius: var(--canon-radius-3);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: var(--canon-font-size-3);
|
||||
align-items: center;
|
||||
gap: var(--canon-space-2);
|
||||
outline: none;
|
||||
grid-template-columns: 1rem 1fr;
|
||||
grid-template-areas: "icon text";
|
||||
display: grid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.canon-SelectItem[data-highlighted] {
|
||||
z-index: 0;
|
||||
color: var(--canon-fg-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.canon-SelectItem[data-highlighted]:before {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
background-color: var(--canon-bg-tint-hover);
|
||||
border-radius: .25rem;
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
inset-inline: .25rem;
|
||||
}
|
||||
|
||||
.canon-SelectItem[data-disabled] {
|
||||
cursor: not-allowed;
|
||||
color: var(--canon-fg-disabled);
|
||||
}
|
||||
|
||||
.canon-SelectItemIndicator {
|
||||
grid-area: icon;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-SelectItemText {
|
||||
flex: 1;
|
||||
grid-area: text;
|
||||
}
|
||||
|
||||
.canon-SelectRequired {
|
||||
color: var(--canon-fg-secondary);
|
||||
font-size: var(--canon-font-size-2);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
margin-left: var(--canon-space-1);
|
||||
}
|
||||
|
||||
.canon-SelectIcon {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-SelectValue {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
.canon-Switch {
|
||||
align-items: center;
|
||||
gap: var(--canon-space-3);
|
||||
font-size: var(--canon-font-size-3);
|
||||
color: var(--canon-fg-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
&[data-pressed] .canon-SwitchIndicator {
|
||||
&:before {
|
||||
background: var(--canon-fg-solid);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-selected] {
|
||||
& .canon-SwitchIndicator {
|
||||
background: var(--canon-bg-solid);
|
||||
|
||||
&:before {
|
||||
background: var(--canon-fg-solid);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-pressed] {
|
||||
& .indicator {
|
||||
background: var(--canon-gray-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-focus-visible] .canon-SwitchIndicator {
|
||||
outline-offset: 2px;
|
||||
outline: 2px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-SwitchIndicator {
|
||||
background: var(--canon-gray-3);
|
||||
border: 2px;
|
||||
border-radius: 1.143rem;
|
||||
width: 2rem;
|
||||
height: 1.143rem;
|
||||
transition: all .2s;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
background: var(--canon-fg-solid);
|
||||
border-radius: 16px;
|
||||
width: .857rem;
|
||||
height: .857rem;
|
||||
margin: .143rem;
|
||||
transition: all .2s;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
.canon-TableCell {
|
||||
padding: var(--canon-space-3);
|
||||
font-size: var(--canon-font-size-3);
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
.canon-TabsRoot {
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: .375rem;
|
||||
}
|
||||
|
||||
.canon-TabsList {
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.canon-TabsTab {
|
||||
appearance: none;
|
||||
color: var(--canon-fg-secondary);
|
||||
user-select: none;
|
||||
padding-inline: var(--canon-space-3);
|
||||
height: 2rem;
|
||||
font-family: inherit;
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
font-size: var(--canon-font-size-2);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding-block: 0;
|
||||
transition: color .2s ease-in-out;
|
||||
display: flex;
|
||||
|
||||
&[data-selected] {
|
||||
color: var(--canon-fg-primary);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: var(--canon-fg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
outline: 1px solid var(--canon-ring);
|
||||
outline-offset: -1px;
|
||||
border-radius: .25rem;
|
||||
position: absolute;
|
||||
inset: .25rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canon-TabsIndicator {
|
||||
z-index: -1;
|
||||
translate: var(--active-tab-left) -50%;
|
||||
width: var(--active-tab-width);
|
||||
background-color: var(--canon-bg-solid);
|
||||
height: 1px;
|
||||
transition-property: translate, width;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.canon-TabsPanel {
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
.canon-Text {
|
||||
font-family: var(--canon-font-regular);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.canon-Text[data-variant="body"] {
|
||||
font-size: var(--canon-font-size-3);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.canon-Text[data-variant="subtitle"] {
|
||||
font-size: var(--canon-font-size-4);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.canon-Text[data-variant="caption"] {
|
||||
font-size: var(--canon-font-size-2);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.canon-Text[data-variant="label"] {
|
||||
font-size: var(--canon-font-size-1);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.canon-Text[data-weight="regular"] {
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
|
||||
.canon-Text[data-weight="bold"] {
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
.canon-Text[data-color="primary"] {
|
||||
color: var(--canon-fg-primary);
|
||||
}
|
||||
|
||||
.canon-Text[data-color="secondary"] {
|
||||
color: var(--canon-fg-secondary);
|
||||
}
|
||||
|
||||
.canon-Text[data-color="danger"] {
|
||||
color: var(--canon-fg-danger);
|
||||
}
|
||||
|
||||
.canon-Text[data-color="warning"] {
|
||||
color: var(--canon-fg-warning);
|
||||
}
|
||||
|
||||
.canon-Text[data-color="success"] {
|
||||
color: var(--canon-fg-success);
|
||||
}
|
||||
|
||||
.canon-Text[data-truncate] {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
.canon-TextField {
|
||||
font-family: var(--canon-font-regular);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-TextFieldInputWrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.canon-TextFieldInputWrapper[data-size="small"] {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.canon-TextFieldInputWrapper[data-size="medium"] {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.canon-TextFieldIcon {
|
||||
left: var(--canon-space-3);
|
||||
margin-right: var(--canon-space-1);
|
||||
color: var(--canon-fg-primary);
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.canon-TextFieldInput {
|
||||
padding: 0 var(--canon-space-3);
|
||||
border-radius: var(--canon-radius-3);
|
||||
border: 1px solid var(--canon-border);
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
font-size: var(--canon-font-size-3);
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-fg-primary);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: inherit;
|
||||
align-items: center;
|
||||
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-TextFieldInput::placeholder {
|
||||
color: var(--canon-fg-secondary);
|
||||
}
|
||||
|
||||
.canon-TextFieldInput[data-icon] {
|
||||
padding-left: var(--canon-space-8);
|
||||
}
|
||||
|
||||
.canon-TextFieldInput[data-focused] {
|
||||
outline-color: var(--canon-border-pressed);
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.canon-TextFieldInput[data-hovered] {
|
||||
border-color: var(--canon-border-hover);
|
||||
}
|
||||
|
||||
.canon-TextFieldInput[data-focused] {
|
||||
border-color: var(--canon-border-pressed);
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.canon-TextFieldInput[data-invalid] {
|
||||
border-color: var(--canon-fg-danger);
|
||||
}
|
||||
|
||||
.canon-TextFieldInput[data-disabled] {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
border: 1px solid var(--canon-border-disabled);
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
.canon-TooltipPopup {
|
||||
box-sizing: border-box;
|
||||
transform-origin: var(--transform-origin);
|
||||
background-color: canvas;
|
||||
background-color: var(--canon-bg-surface-1);
|
||||
color: var(--canon-fg-primary);
|
||||
outline: 1px solid var(--canon-border);
|
||||
box-shadow: 0 10px 15px -3px var(--canon-border), 0 4px 6px -4px var(--canon-border);
|
||||
border-radius: .375rem;
|
||||
flex-direction: column;
|
||||
padding: .25rem .5rem;
|
||||
font-size: .875rem;
|
||||
line-height: 1.25rem;
|
||||
transition: transform .15s, opacity .15s;
|
||||
display: flex;
|
||||
|
||||
&[data-starting-style], &[data-ending-style] {
|
||||
opacity: 0;
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
&[data-instant] {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-TooltipArrow {
|
||||
display: flex;
|
||||
|
||||
&[data-side="top"] {
|
||||
bottom: -8px;
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
&[data-side="bottom"] {
|
||||
top: -8px;
|
||||
rotate: none;
|
||||
}
|
||||
|
||||
&[data-side="left"] {
|
||||
right: -13px;
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
&[data-side="right"] {
|
||||
left: -13px;
|
||||
rotate: -90deg;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-TooltipArrow-fill {
|
||||
fill: var(--canon-bg-surface-1);
|
||||
}
|
||||
|
||||
.canon-TooltipArrow-outer-stroke {
|
||||
@media (prefers-color-scheme: light) {
|
||||
& {
|
||||
fill: var(--canon-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1328,6 +1328,7 @@ export interface TextFieldProps
|
||||
extends TextFieldProps_2,
|
||||
Omit<FieldLabelProps, 'htmlFor' | 'id'> {
|
||||
icon?: ReactNode;
|
||||
placeholder?: string;
|
||||
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
|
||||
}
|
||||
|
||||
|
||||
@@ -17,89 +17,55 @@
|
||||
/* eslint-disable no-restricted-imports */
|
||||
import { transform, bundle } from 'lightningcss';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import chalk from 'chalk';
|
||||
import { glob } from 'glob';
|
||||
/* eslint-enable no-restricted-imports */
|
||||
|
||||
// Check if core.css and components.css exist
|
||||
const cssDir = 'src/css';
|
||||
const srcFile = 'src/css/styles.css';
|
||||
const distDir = 'css';
|
||||
const componentsDir = 'src/components';
|
||||
const distFile = `${distDir}/styles.css`;
|
||||
|
||||
// Core files
|
||||
const cssFiles = [
|
||||
{ path: `${cssDir}/core.css`, newName: 'core.css' },
|
||||
{ path: `${cssDir}/components.css`, newName: 'components.css' },
|
||||
{ path: `${cssDir}/styles.css`, newName: 'styles.css' },
|
||||
];
|
||||
|
||||
// Components files
|
||||
const componentsFiles = glob
|
||||
.sync('**/*.css', { cwd: componentsDir })
|
||||
.map(file => {
|
||||
const folderName = file.split('/')[0].toLocaleLowerCase('en-US');
|
||||
return { path: `${componentsDir}/${file}`, newName: `${folderName}.css` };
|
||||
});
|
||||
|
||||
// Combine core and components files
|
||||
cssFiles.push(...componentsFiles);
|
||||
|
||||
// Check if files exist
|
||||
cssFiles.forEach(file => {
|
||||
if (!fs.existsSync(file.path)) {
|
||||
console.error(`${file.originalName} does not exist`);
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
// Check if styles.css exists
|
||||
if (!fs.existsSync(srcFile)) {
|
||||
console.error(`${srcFile} does not exist`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Ensure the dist/css directory exists
|
||||
if (!fs.existsSync(distDir)) {
|
||||
fs.mkdirSync(distDir, { recursive: true });
|
||||
}
|
||||
|
||||
// Add watch mode support
|
||||
const args = process.argv.slice(2);
|
||||
const watchMode = args.includes('--watch');
|
||||
|
||||
async function buildCSS(logs = true) {
|
||||
// Bundle and transform files
|
||||
cssFiles.forEach(file => {
|
||||
let { code: bundleCode } = bundle({
|
||||
filename: file.path,
|
||||
});
|
||||
const css = fs.readFileSync(srcFile);
|
||||
|
||||
let { code } = transform({
|
||||
filename: `${distDir}/${file.newName}`,
|
||||
code: bundleCode,
|
||||
});
|
||||
|
||||
fs.writeFileSync(`${distDir}/${file.newName}`, code);
|
||||
|
||||
if (logs) {
|
||||
console.log(chalk.blue('CSS bundled: ') + file.newName);
|
||||
}
|
||||
let { code: bundleCode } = bundle({
|
||||
filename: srcFile,
|
||||
});
|
||||
|
||||
const { code } = transform({
|
||||
filename: distFile,
|
||||
code: bundleCode,
|
||||
minify: false,
|
||||
});
|
||||
fs.writeFileSync(distFile, code);
|
||||
if (logs) {
|
||||
console.log(chalk.green('CSS files bundled successfully!'));
|
||||
console.log(chalk.blue('CSS transformed and minified: ') + 'styles.css');
|
||||
console.log(chalk.green('CSS file built successfully!'));
|
||||
}
|
||||
}
|
||||
|
||||
if (watchMode) {
|
||||
// Watch both directories for changes
|
||||
[cssDir, componentsDir].forEach(dir => {
|
||||
fs.watch(dir, { recursive: true }, (eventType, filename) => {
|
||||
if (filename?.endsWith('.css')) {
|
||||
console.log(
|
||||
chalk.yellow(`Changes detected in ${filename}, rebuilding...`),
|
||||
);
|
||||
buildCSS(false).catch(console.error);
|
||||
}
|
||||
});
|
||||
fs.watch('src/css', { recursive: true }, (eventType, filename) => {
|
||||
if (filename === 'styles.css') {
|
||||
console.log(
|
||||
chalk.yellow(`Changes detected in ${filename}, rebuilding...`),
|
||||
);
|
||||
buildCSS(false).catch(console.error);
|
||||
}
|
||||
});
|
||||
|
||||
// Initial build
|
||||
buildCSS().catch(console.error);
|
||||
console.log(chalk.yellow('Watching for CSS changes...'));
|
||||
} else {
|
||||
|
||||
@@ -40,7 +40,7 @@ type Story = StoryObj<typeof meta>;
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
name: 'url',
|
||||
defaultValue: 'Enter a URL',
|
||||
placeholder: 'Enter a URL',
|
||||
style: {
|
||||
maxWidth: '300px',
|
||||
},
|
||||
@@ -97,28 +97,16 @@ export const Disabled: Story = {
|
||||
export const WithIcon: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
placeholder: 'Search...',
|
||||
icon: <Icon name="search" />,
|
||||
},
|
||||
render: args => (
|
||||
<TextField
|
||||
{...args}
|
||||
icon={<Icon name="search" />}
|
||||
defaultValue="Search..."
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
export const DisabledWithIcon: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
...WithIcon.args,
|
||||
isDisabled: true,
|
||||
},
|
||||
render: args => (
|
||||
<TextField
|
||||
{...args}
|
||||
icon={<Icon name="search" />}
|
||||
defaultValue="Search..."
|
||||
isDisabled
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
export const ShowError: Story = {
|
||||
|
||||
@@ -36,6 +36,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
|
||||
isRequired,
|
||||
'aria-label': ariaLabel,
|
||||
'aria-labelledby': ariaLabelledBy,
|
||||
placeholder,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
@@ -81,6 +82,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
|
||||
<Input
|
||||
className="canon-TextFieldInput"
|
||||
{...(icon && { 'data-icon': true })}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
</div>
|
||||
<FieldError />
|
||||
|
||||
@@ -33,4 +33,9 @@ export interface TextFieldProps
|
||||
* @defaultValue 'medium'
|
||||
*/
|
||||
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
|
||||
|
||||
/**
|
||||
* Text to display in the input when it has no value
|
||||
*/
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user