Fixing styles
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -278,66 +278,78 @@
|
||||
}
|
||||
}
|
||||
|
||||
.canon-input-root {
|
||||
.canon-Input {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
border: 1px solid var(--canon-border-base);
|
||||
padding: 0 var(--canon-space-4);
|
||||
background-color: var(--canon-surface-1);
|
||||
font-size: var(--canon-font-size-body);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-text-primary);
|
||||
width: 100%;
|
||||
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
|
||||
}
|
||||
|
||||
.canon-Input::placeholder {
|
||||
color: var(--canon-text-secondary);
|
||||
}
|
||||
|
||||
.canon-Input:hover {
|
||||
border-color: var(--canon-border-hover);
|
||||
}
|
||||
|
||||
.canon-Input:focus-visible {
|
||||
outline-color: var(--canon-border-selected);
|
||||
border-color: var(--canon-border-selected);
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.canon-Input[data-invalid] {
|
||||
border-color: var(--canon-error);
|
||||
}
|
||||
|
||||
.canon-Input--size-sm {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.canon-Input--size-md {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.canon-FieldRoot {
|
||||
font-family: var(--canon-font-regular);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-input-label {
|
||||
.canon-FieldLabel {
|
||||
font-size: var(--canon-font-size-caption);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-text-primary);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
margin-bottom: var(--canon-spacing-3xs);
|
||||
}
|
||||
|
||||
.canon-input-control {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
border: 1px solid var(--canon-border-base);
|
||||
padding: var(--canon-space-4);
|
||||
background-color: var(--canon-surface-1);
|
||||
font-size: var(--canon-font-size-body);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-text-primary);
|
||||
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
|
||||
}
|
||||
|
||||
.canon-input-control::placeholder {
|
||||
color: var(--canon-text-secondary);
|
||||
}
|
||||
|
||||
.canon-input-control:hover {
|
||||
border-color: var(--canon-border-hover);
|
||||
}
|
||||
|
||||
.canon-input-control:focus-visible {
|
||||
outline-color: var(--canon-border-selected);
|
||||
border-color: var(--canon-border-selected);
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.canon-input-control[data-invalid] {
|
||||
border-color: var(--canon-error);
|
||||
}
|
||||
|
||||
.canon-input-control-sm {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.canon-input-control-md {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.canon-input-description {
|
||||
.canon-FieldDescription {
|
||||
font-size: var(--canon-font-size-caption);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-text-secondary);
|
||||
margin-top: var(--canon-space-1_5);
|
||||
padding-top: var(--canon-spacing-3xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.canon-input-error {
|
||||
.canon-FieldError {
|
||||
font-size: var(--canon-font-size-caption);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-error);
|
||||
margin-top: var(--canon-space-1_5);
|
||||
padding-top: var(--canon-spacing-3xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.canon-FieldValidity {
|
||||
font-size: var(--canon-font-size-caption);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-text-secondary);
|
||||
padding-top: var(--canon-spacing-3xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -5657,7 +5657,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--canon-font-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--canon-font-regular: system-ui;
|
||||
--canon-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
|
||||
--canon-font-weight-regular: 400;
|
||||
--canon-font-weight-bold: 600;
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
font-size: var(--canon-font-size-caption);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-text-primary);
|
||||
margin-bottom: var(--canon-spacing-3xs);
|
||||
margin-bottom: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.canon-FieldDescription {
|
||||
@@ -33,7 +33,7 @@
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-text-secondary);
|
||||
margin: 0;
|
||||
padding-top: var(--canon-spacing-3xs);
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.canon-FieldError {
|
||||
@@ -41,7 +41,7 @@
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-error);
|
||||
margin: 0;
|
||||
padding-top: var(--canon-spacing-3xs);
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
.canon-FieldValidity {
|
||||
@@ -49,5 +49,5 @@
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
color: var(--canon-text-secondary);
|
||||
margin: 0;
|
||||
padding-top: var(--canon-spacing-3xs);
|
||||
padding-top: var(--canon-space-1_5);
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
.canon-Input {
|
||||
border-radius: var(--canon-border-radius-sm);
|
||||
border: 1px solid var(--canon-border-base);
|
||||
padding: var(--canon-spacing-sm);
|
||||
padding: 0 var(--canon-space-4);
|
||||
background-color: var(--canon-surface-1);
|
||||
font-size: var(--canon-font-size-body);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Normalize */
|
||||
@import './base.css';
|
||||
@import './utilities.css';
|
||||
|
||||
/* Light theme tokens */
|
||||
|
||||
:root {
|
||||
/* Font families */
|
||||
--canon-font-regular: system-ui;
|
||||
--canon-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
|
||||
'Liberation Mono', 'Courier New', monospace;
|
||||
|
||||
/* Font weights */
|
||||
--canon-font-weight-regular: 400;
|
||||
--canon-font-weight-bold: 600;
|
||||
|
||||
/* Font sizes */
|
||||
--canon-font-size-label: 0.625rem; /* 10px */
|
||||
--canon-font-size-caption: 0.75rem; /* 12px */
|
||||
--canon-font-size-body: 0.875rem; /* 14px */
|
||||
--canon-font-size-subtitle: 1rem; /* 16px */
|
||||
--canon-font-size-title5: 1.25rem; /* 20px */
|
||||
--canon-font-size-title4: 1.5rem; /* 24px */
|
||||
--canon-font-size-title3: 2rem; /* 32px */
|
||||
--canon-font-size-title2: 3rem; /* 48px */
|
||||
--canon-font-size-title1: 4rem; /* 64px */
|
||||
--canon-font-size-display: 5.75rem; /* 92px */
|
||||
|
||||
/* Spacing */
|
||||
/* This is the spacing multiplier */
|
||||
--canon-space: 0.25rem; /* 4px */
|
||||
|
||||
/* These are the spacing scale */
|
||||
--canon-space-0_5: calc(var(--canon-space) * 0.5); /* 2px */
|
||||
--canon-space-1: var(--canon-space); /* 4px */
|
||||
--canon-space-1_5: calc(var(--canon-space) * 1.5); /* 6px */
|
||||
--canon-space-2: calc(var(--canon-space) * 2); /* 8px */
|
||||
--canon-space-3: calc(var(--canon-space) * 3); /* 12px */
|
||||
--canon-space-4: calc(var(--canon-space) * 4); /* 16px */
|
||||
--canon-space-5: calc(var(--canon-space) * 5); /* 20px */
|
||||
--canon-space-6: calc(var(--canon-space) * 6); /* 24px */
|
||||
--canon-space-7: calc(var(--canon-space) * 7); /* 28px */
|
||||
--canon-space-8: calc(var(--canon-space) * 8); /* 32px */
|
||||
--canon-space-9: calc(var(--canon-space) * 9); /* 36px */
|
||||
--canon-space-10: calc(var(--canon-space) * 10); /* 40px */
|
||||
--canon-space-11: calc(var(--canon-space) * 11); /* 44px */
|
||||
--canon-space-12: calc(var(--canon-space) * 12); /* 48px */
|
||||
--canon-space-13: calc(var(--canon-space) * 13); /* 52px */
|
||||
--canon-space-14: calc(var(--canon-space) * 14); /* 56px */
|
||||
|
||||
/* Border radius */
|
||||
--canon-border-radius-2xs: 0.125rem; /* 2px */
|
||||
--canon-border-radius-xs: 0.25rem; /* 4px */
|
||||
--canon-border-radius-sm: 0.5rem; /* 8px */
|
||||
--canon-border-radius-md: 0.75rem; /* 12px */
|
||||
--canon-border-radius-lg: 1rem; /* 16px */
|
||||
--canon-border-radius-xl: 1.25rem; /* 20px */
|
||||
--canon-border-radius-2xl: 1.5rem; /* 24px */
|
||||
|
||||
/* Container */
|
||||
--canon-container-max-width: 1200px;
|
||||
--canon-container-padding: 1rem;
|
||||
|
||||
/* Colors */
|
||||
--canon-accent: #000;
|
||||
--canon-background: #f8f8f8;
|
||||
--canon-surface-1: #fff;
|
||||
--canon-surface-2: #f4f4f4;
|
||||
--canon-surface-3: #f1f1f1;
|
||||
|
||||
/* Borders */
|
||||
--canon-border-base: rgba(0, 0, 0, 0.1);
|
||||
--canon-border-hover: rgba(0, 0, 0, 0.2);
|
||||
--canon-border-warning: #e36d05;
|
||||
--canon-border-error: #e22b2b;
|
||||
--canon-border-selected: rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* States - Add more states */
|
||||
--canon-error: #f50000;
|
||||
|
||||
/* Text colors */
|
||||
--canon-text-primary: #000;
|
||||
--canon-text-primary-on-accent: #fff;
|
||||
--canon-text-secondary: #646464;
|
||||
}
|
||||
|
||||
/* Dark theme tokens */
|
||||
[data-theme='dark'] {
|
||||
/* Colors */
|
||||
--canon-accent: #fff;
|
||||
--canon-background: #000;
|
||||
--canon-surface-1: #121212;
|
||||
--canon-surface-2: #1a1a1a;
|
||||
|
||||
/* Borders */
|
||||
--canon-border-base: rgba(255, 255, 255, 0.2);
|
||||
--canon-border-hover: rgba(255, 255, 255, 0.3);
|
||||
--canon-border-warning: #f50000;
|
||||
--canon-border-error: #f87503;
|
||||
--canon-border-selected: rgba(255, 255, 255, 0.4);
|
||||
|
||||
/* States - Add more states */
|
||||
--canon-error: #f50000;
|
||||
|
||||
/* Text colors */
|
||||
--canon-text-primary: #fff;
|
||||
--canon-text-primary-on-accent: #000;
|
||||
--canon-text-secondary: #b3b3b3;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user