From 8d75642e6df824934b080527c95908aac7b6179c Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Wed, 27 Aug 2025 16:51:06 +0800 Subject: [PATCH] Added bootstrap design --- src/builtin-components/Button/Button.sass | 211 +++++++++++++++++++++- src/builtin-components/Button/Button.tsx | 54 +++++- 2 files changed, 253 insertions(+), 12 deletions(-) diff --git a/src/builtin-components/Button/Button.sass b/src/builtin-components/Button/Button.sass index 9371868..329ba1d 100644 --- a/src/builtin-components/Button/Button.sass +++ b/src/builtin-components/Button/Button.sass @@ -1,22 +1,223 @@ @use '/src/styles/variables.sass' as vars +@use '/src/styles/fonts.sass' as fonts @use 'sass:color' +$bulmaPrimary: rgb(0, 235, 199) +$bulmaPrimaryText: rgb(0, 31, 26) +$bulmaLink: rgb(92, 111, 255) +$bulmaLinkText: rgb(245, 246, 255) +$bulmaInfo: rgb(128, 217, 255) +$bulmaInfoText: rgb(0, 36, 51) +$bulmaSuccess: rgb(91, 205, 154) +$bulmaSuccessText: rgb(10, 31, 21) +$bulmaWarning: rgb(255, 191, 41) +$bulmaWarningText: rgb(41, 29, 0) +$bulmaDanger: rgb(255, 128, 153) +$bulmaDangerText: rgb(26, 0, 5) +$bulmaLight: rgb(255, 255, 255) +$bulmaLightText: rgb(46, 51, 61) +$bulmaDark: rgb(57, 63, 76) +$bulmaDarkText: rgb(243, 244, 246) +$bulmaText: rgb(31, 34, 41) +$bulmaTextText: rgb(235, 236, 240) +$bulmaGhost: rgba(0,0,0,0) +$bulmaGhostText: rgb(66, 88, 255) + +$bootstrapTextLight: rgb(255, 255, 253) +$bootstrapTextDark: rgb(0, 0, 2) +$bootstrapTextLink: rgb(139, 185, 254) +$bootstrapPrimary: rgb(13, 110, 253) +$bootstrapSecondary: rgb(92, 99, 106) +$bootstrapSuccess: rgb(21, 115, 71) +$bootstrapDanger: rgb(187, 45, 59) +$bootstrapWarning: rgb(255, 202, 44) +$bootstrapInfo: rgb(49, 210, 242) +$bootstrapLight: rgb(211, 212, 213) +$bootstrapDark: rgb(33, 37, 41) + .button - background: vars.$primaryColor + background-color: vars.$primaryColor border: none - border-radius: 32px color: white padding: 0.5rem 1.25rem text-align: center text-decoration: none display: inline-block - font-size: 0.75rem - font-weight: 700 + font-size: 1rem + font-weight: 500 cursor: pointer transition: all 0.2s ease-out &:hover - background: color.adjust(vars.$primaryColor, $blackness: 20%) + background-color: color.adjust(vars.$primaryColor, $blackness: 20%) &:active transform: scale(0.95) + +.bu-primary + @extend .button + font-family: fonts.$Inter + background-color: $bulmaPrimary + color: $bulmaPrimaryText + border: none + font-size: 1rem + border-radius: 0.375rem + font-weight: 500 + padding: 0.5rem 1.25rem + height: 2.5rem + + &:hover + background-color: color.adjust($bulmaPrimary, $lightness: 10%) + +.bu-link + @extend .bu-primary + background-color: $bulmaLink + color: $bulmaLinkText + + &:hover + background-color: color.adjust($bulmaLink, $lightness: 5%) + +.bu-info + @extend .bu-primary + background-color: $bulmaInfo + color: $bulmaInfoText + + &:hover + background-color: color.adjust($bulmaInfo, $lightness: 5%) + +.bu-success + @extend .bu-primary + background-color: $bulmaSuccess + color: $bulmaSuccessText + + &:hover + background-color: color.adjust($bulmaSuccess, $lightness: 5%) + +.bu-warning + @extend .bu-primary + background-color: $bulmaWarning + color: $bulmaWarningText + + &:hover + background-color: color.adjust($bulmaWarning, $lightness: 5%) + +.bu-danger + @extend .bu-primary + background-color: $bulmaDanger + color: $bulmaDangerText + + &:hover + background-color: color.adjust($bulmaDanger, $lightness: 5%) + +.bu-light + @extend .bu-primary + background-color: $bulmaLight + color: $bulmaLightText + + &:hover + background-color: color.adjust($bulmaLight, $lightness: 5%) + +.bu-dark + @extend .bu-primary + background-color: $bulmaDark + color: $bulmaDarkText + + &:hover + background-color: color.adjust($bulmaDark, $lightness: 5%) + +.bu-text + @extend .bu-primary + background-color: rgba(0,0,0,0) + color: $bulmaTextText + text-decoration: underline + + &:hover + background-color: hsl(221,14%,14%) + +.bu-ghost + @extend .bu-primary + background-color: $bulmaGhost + color: $bulmaGhostText + + &:hover + background-color: transparent + text-decoration: underline + +.bo-primary + @extend .button + font-family: 'Segoe UI', fonts.$Roboto + background-color: $bootstrapPrimary + color: $bootstrapTextLight + border: none + font-size: 1rem + border-radius: 0.375rem + font-weight: 400 + padding: 0.5rem 1.25rem + height: 2.5rem + margin: 0.25rem 0.125rem + + &:hover + background-color: color.adjust($bootstrapPrimary, $blackness: 10%) + +.bo-secondary + @extend .bo-primary + background-color: $bootstrapSecondary + + &:hover + background-color: color.adjust($bootstrapSecondary, $blackness: 10%) + +.bo-success + @extend .bo-primary + background-color: $bootstrapSuccess + + &:hover + background-color: color.adjust($bootstrapSuccess, $blackness: 10%) + +.bo-danger + @extend .bo-primary + background-color: $bootstrapDanger + + &:hover + background-color: color.adjust($bootstrapDanger, $blackness: 10%) + +.bo-warning + @extend .bo-primary + background-color: $bootstrapWarning + color: $bootstrapTextDark + + &:hover + background-color: color.adjust($bootstrapWarning, $lightness: 5%) + +.bo-info + @extend .bo-primary + background-color: $bootstrapInfo + color: $bootstrapTextDark + + &:hover + background-color: color.adjust($bootstrapInfo, $lightness: 5%) + +.bo-light + @extend .bo-primary + background-color: $bootstrapLight + color: $bootstrapTextDark + + &:hover + background-color: color.adjust($bootstrapLight, $blackness: 10%) + +.bo-dark + @extend .bo-primary + background-color: $bootstrapDark + // color: $bootstrapTextDark + + &:hover + background-color: color.adjust($bootstrapDark, $lightness: 10%) + +.bo-link + @extend .bo-primary + background-color: transparent + color: $bootstrapTextLink + text-decoration: underline + + &:hover + color: color.adjust($bootstrapTextLink, $lightness: 5%) + background-color: transparent diff --git a/src/builtin-components/Button/Button.tsx b/src/builtin-components/Button/Button.tsx index 5a4611a..156b29f 100644 --- a/src/builtin-components/Button/Button.tsx +++ b/src/builtin-components/Button/Button.tsx @@ -1,25 +1,65 @@ +import { boolean } from 'astro:schema' import './Button.sass' -import { Show } from 'solid-js' +import { Show, Switch, Match } from 'solid-js' interface Props { label?: string to?: string onClick?: () => void + edges?: 'curved' | 'rounded' | 'flat' + design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link' +} + +const getBorderRadius = (edge: Props['edges']) => { + switch (edge) { + case 'curved': + return 'border-radius: 6px' + case 'rounded': + return 'border-radius: 32px' + case 'flat': + return 'border-radius: 0' + default: + return 'border-radius: 0' + } } export default (props: Props) => { + const borderRadius = getBorderRadius(props.edges) + return ( <> - - - + + + + + + + + + + + + - + + + + + + + + )