mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-04-24 13:34:55 +00:00
Updated plan: Remove Tailwind, convert all CSS to SCSS
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -1,10 +1,6 @@
|
||||
// Radix UI Colors imports (keeping the color system)
|
||||
@import '@radix-ui/colors/sage-dark.css';
|
||||
@import '@radix-ui/colors/slate.css';
|
||||
// Radix UI Colors imports (dark mode only - simplified)
|
||||
@import '@radix-ui/colors/slate-dark.css';
|
||||
@import '@radix-ui/colors/blue.css';
|
||||
@import '@radix-ui/colors/blue-dark.css';
|
||||
@import '@radix-ui/colors/violet.css';
|
||||
@import '@radix-ui/colors/violet-dark.css';
|
||||
|
||||
// Spacing scale variables
|
||||
@@ -45,9 +41,10 @@ $radius-full: 9999px;
|
||||
--color-neutral-11: var(--slate-11);
|
||||
--color-neutral-12: var(--slate-12);
|
||||
|
||||
// Accent colors (using blue from Radix)
|
||||
// Accent colors (using blue and violet from Radix)
|
||||
--color-accent-9: var(--blue-9);
|
||||
--color-accent-11: var(--blue-11);
|
||||
--color-accent-contrast: var(--violet-9);
|
||||
|
||||
// Foreground colors
|
||||
--color-fg: var(--color-neutral-12);
|
||||
|
||||
90
src/styles/components/_buttons.scss
Normal file
90
src/styles/components/_buttons.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
@use '../abstracts' as *;
|
||||
|
||||
// Button component styles
|
||||
// These complement the existing Tailwind-based button components
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $size-2;
|
||||
padding: $size-2 $size-4;
|
||||
border: none;
|
||||
border-radius: $radius-md;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 3px var(--color-bg-inset), 0 0 0 6px var(--color-focus-ring);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Primary variant
|
||||
&-primary {
|
||||
background: linear-gradient(135deg, hsl(263, 70%, 50%) 0%, hsl(263, 70%, 45%) 100%);
|
||||
color: $primary-foreground;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
filter: brightness(1.1);
|
||||
box-shadow: 0 8px 16px rgba(147, 51, 234, 0.4);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary variant
|
||||
&-secondary {
|
||||
background-color: $secondary;
|
||||
color: $secondary-foreground;
|
||||
border: 1px solid $border;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: hsl(217.2, 32.6%, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
// Ghost variant
|
||||
&-ghost {
|
||||
background-color: transparent;
|
||||
color: $accent;
|
||||
border: 1px solid $accent;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: rgba(99, 242, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline variant
|
||||
&-outline {
|
||||
background-color: transparent;
|
||||
color: $foreground;
|
||||
border: 1px solid $border;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Size variants
|
||||
&-sm {
|
||||
padding: calc($size-1 * 0.75) $size-2;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
padding: $size-3 $size-6;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
64
src/styles/components/_cards.scss
Normal file
64
src/styles/components/_cards.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
@use '../abstracts' as *;
|
||||
|
||||
// Card component styles
|
||||
.card {
|
||||
background-color: $card;
|
||||
border: 1px solid $border;
|
||||
border-radius: $radius-lg;
|
||||
padding: $size-6;
|
||||
transition: all 0.2s ease;
|
||||
color: $card-foreground;
|
||||
|
||||
&:hover {
|
||||
border-color: $accent;
|
||||
box-shadow: 0 4px 12px rgba(99, 242, 255, 0.1);
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-bottom: $size-4;
|
||||
padding-bottom: $size-4;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: $foreground;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: $size-2;
|
||||
font-size: 0.875rem;
|
||||
color: $muted-foreground;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__body {
|
||||
color: $muted-foreground;
|
||||
line-height: 1.6;
|
||||
margin: $size-4 0;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $size-2;
|
||||
margin-top: $size-4;
|
||||
padding-top: $size-4;
|
||||
border-top: 1px solid $border;
|
||||
}
|
||||
|
||||
// Card variants
|
||||
&--hover-lift {
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(99, 242, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&--compact {
|
||||
padding: $size-4;
|
||||
}
|
||||
}
|
||||
84
src/styles/components/_forms.scss
Normal file
84
src/styles/components/_forms.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
@use '../abstracts' as *;
|
||||
|
||||
// Form component styles
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $size-4;
|
||||
|
||||
&__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $size-2;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: $foreground;
|
||||
}
|
||||
|
||||
&__input,
|
||||
&__select,
|
||||
&__textarea {
|
||||
padding: $size-2 $size-3;
|
||||
background-color: $input;
|
||||
color: $foreground;
|
||||
border: 1px solid $border;
|
||||
border-radius: $radius-md;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $ring;
|
||||
box-shadow: 0 0 0 3px rgba(99, 242, 255, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $muted-foreground;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: $muted;
|
||||
}
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
font-family: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
&__select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cbd5e1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right $size-3 center;
|
||||
padding-right: $size-8;
|
||||
}
|
||||
|
||||
&__helper {
|
||||
font-size: 0.75rem;
|
||||
color: $muted-foreground;
|
||||
margin-top: -$size-1;
|
||||
}
|
||||
|
||||
&__error {
|
||||
font-size: 0.75rem;
|
||||
color: $destructive;
|
||||
margin-top: -$size-1;
|
||||
}
|
||||
|
||||
// Checkbox and radio styles
|
||||
&__checkbox,
|
||||
&__radio {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
accent-color: $primary;
|
||||
}
|
||||
}
|
||||
6
src/styles/components/_index.scss
Normal file
6
src/styles/components/_index.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
// Component styles index
|
||||
// Import all component SCSS modules here
|
||||
@forward './buttons';
|
||||
@forward './cards';
|
||||
@forward './forms';
|
||||
@forward './typography';
|
||||
111
src/styles/components/_typography.scss
Normal file
111
src/styles/components/_typography.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
@use '../abstracts' as *;
|
||||
|
||||
// Typography styles
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-inter), 'Inter', sans-serif;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: $foreground;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
margin-bottom: $size-4;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: $size-3;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: $size-3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: $size-2;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: $size-2;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: $size-2;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: $size-4;
|
||||
color: $foreground;
|
||||
|
||||
&.text-muted {
|
||||
color: $muted-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
// Code blocks
|
||||
code {
|
||||
font-family: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
|
||||
background-color: $muted;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: $radius-sm;
|
||||
font-size: 0.875em;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
|
||||
background-color: $muted;
|
||||
padding: $size-4;
|
||||
border-radius: $radius-md;
|
||||
overflow-x: auto;
|
||||
margin-bottom: $size-4;
|
||||
border: 1px solid $border;
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: $foreground;
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: lighten($accent, 10%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $ring;
|
||||
outline-offset: 2px;
|
||||
border-radius: $radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Text utility classes
|
||||
.text-muted {
|
||||
color: $muted-foreground;
|
||||
}
|
||||
|
||||
.text-accent {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.text-destructive {
|
||||
color: $destructive;
|
||||
}
|
||||
Reference in New Issue
Block a user