From b5e1e462462db0a645d718e8f697d4e54b2b4d63 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Thu, 25 Jul 2024 13:41:25 +0200 Subject: [PATCH 1/2] ref(changelog): Clean up some styling --- .../changelog/src/app/(changelog)/globals.css | 0 .../src/app/(changelog)/layout.module.css | 3 - apps/changelog/src/app/(changelog)/layout.tsx | 2 +- apps/changelog/tailwind.config.ts | 68 +++++++++++-------- 4 files changed, 39 insertions(+), 34 deletions(-) delete mode 100644 apps/changelog/src/app/(changelog)/globals.css delete mode 100644 apps/changelog/src/app/(changelog)/layout.module.css diff --git a/apps/changelog/src/app/(changelog)/globals.css b/apps/changelog/src/app/(changelog)/globals.css deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/apps/changelog/src/app/(changelog)/layout.module.css b/apps/changelog/src/app/(changelog)/layout.module.css deleted file mode 100644 index bebc60cf92811..0000000000000 --- a/apps/changelog/src/app/(changelog)/layout.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.changelogContent { - font-family: var(--font-rubik); -} diff --git a/apps/changelog/src/app/(changelog)/layout.tsx b/apps/changelog/src/app/(changelog)/layout.tsx index 8bb7becdf0bd5..22c3e26f2468b 100644 --- a/apps/changelog/src/app/(changelog)/layout.tsx +++ b/apps/changelog/src/app/(changelog)/layout.tsx @@ -17,7 +17,7 @@ export default function ChangelogLayout({children}: {children: ReactNode}) { return ( -
+
{children}
diff --git a/apps/changelog/tailwind.config.ts b/apps/changelog/tailwind.config.ts index b78fa42cb97ae..71c43f44b6c60 100644 --- a/apps/changelog/tailwind.config.ts +++ b/apps/changelog/tailwind.config.ts @@ -1,60 +1,68 @@ -const defaultTheme = require("tailwindcss/defaultTheme"); +const defaultTheme = require('tailwindcss/defaultTheme'); /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/**/*.{js,ts,jsx,tsx}"], + content: ['./src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { animation: { - "fade-in": "fadeIn 0.35s ease-in-out", - "fade-in-left": "fadeInLeft 0.55s ease-in-out", - "fade-in-right": "fadeInRight 0.55s ease-in-out", + 'fade-in': 'fadeIn 0.35s ease-in-out', + 'fade-in-left': 'fadeInLeft 0.55s ease-in-out', + 'fade-in-right': 'fadeInRight 0.55s ease-in-out', }, boxShadow: { - DEFAULT: "var(--shadow-6)", + DEFAULT: 'var(--shadow-6)', }, keyframes: () => ({ fadeIn: { - "0%": { opacity: 0 }, - "100%": { opacity: 1 }, + '0%': {opacity: 0}, + '100%': {opacity: 1}, }, fadeInLeft: { - "0%": { opacity: 0, transform: "translateX(-20px)" }, - "100%": { opacity: 1, transform: "translateX(0)" }, + '0%': {opacity: 0, transform: 'translateX(-20px)'}, + '100%': {opacity: 1, transform: 'translateX(0)'}, }, fadeInRight: { - "0%": { opacity: 0, transform: "translateX(20px)" }, - "100%": { opacity: 1, transform: "translateX(0)" }, + '0%': {opacity: 0, transform: 'translateX(20px)'}, + '100%': {opacity: 1, transform: 'translateX(0)'}, }, }), fontFamily: { sans: [ - "var(--font-rubik)", - "-apple-system", - "BlinkMacSystemFont", - "Segoe UI", - "Helvetica", - "Arial", + 'var(--font-rubik)', + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Helvetica', + 'Arial', ...defaultTheme.fontFamily.sans, ], - mono: "var(--font-family-monospace)", + mono: [ + 'Roboto Mono', + 'SFMono-Regular', + 'Consolas', + 'Liberation Mono', + 'Menlo', + 'Courier', + 'monospace', + ], }, colors: { - primary: "#362d59", - pruple: "#8d5494", - darkPurple: "#1F1633", - "accent-purple": "#6A5FC1", - "accent-md-violet": "#584774", - red: "#e1567c", - gold: "#F1B71C", + primary: '#362d59', + pruple: '#8d5494', + darkPurple: '#1F1633', + 'accent-purple': '#6A5FC1', + 'accent-md-violet': '#584774', + red: '#e1567c', + gold: '#F1B71C', }, }, }, plugins: [ - require("@tailwindcss/typography"), - require("@tailwindcss/forms")({ - strategy: "class", + require('@tailwindcss/typography'), + require('@tailwindcss/forms')({ + strategy: 'class', }), ], - blocklist: ["collapse"], + blocklist: ['collapse'], }; From 66c845e7bdc1a0c6e7ec1a9e075411b7cdd28e09 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Thu, 25 Jul 2024 14:01:06 +0200 Subject: [PATCH 2/2] get rid of more unnecessary stuff --- apps/changelog/src/app/globals.css | 121 ++--------------------------- 1 file changed, 8 insertions(+), 113 deletions(-) diff --git a/apps/changelog/src/app/globals.css b/apps/changelog/src/app/globals.css index 76814fcf4d03c..19e1522f2336d 100644 --- a/apps/changelog/src/app/globals.css +++ b/apps/changelog/src/app/globals.css @@ -4,26 +4,19 @@ @tailwind components; @tailwind utilities; -.radix-themes { - --cursor-button: pointer; - --iris-9: var(--accent-purple); - --iris-a9: var(--accent-purple); - --shadow-6: 0px 4px 16px 0px rgba(31, 22, 51, 0.1); -} - .fancy-border { transition-property: box-shadow, border-color; transition-duration: 0.25s; transition-timing-function: ease-out; +} - &:hover { - box-shadow: - 0 2px 0 rgba(54, 45, 89, 0.15), - -0.1875rem -0.1875rem 0 0.1875rem #f2b712, - 0 0 0 0.375rem #e1567c; - text-decoration: none; - cursor: pointer; - } +.fancy-border:hover { + box-shadow: + 0 2px 0 rgba(54, 45, 89, 0.15), + -0.1875rem -0.1875rem 0 0.1875rem #f2b712, + 0 0 0 0.375rem #e1567c; + text-decoration: none; + cursor: pointer; } .hero-top-left-down-slope { @@ -38,105 +31,7 @@ clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%); } -.icon { - margin-left: 0.25em; - - svg { - display: inline; - width: 14px; - height: 14px; - } -} - -.icon-external-link { - margin-left: 0; - - svg { - margin-left: 0.15em; - } -} - :root { - /* Oranges */ - --flame0: #df5128; - --flame1: #e55e32; - --flame2: #ea6b3c; - --flame3: #ef7846; - --flame4: #f4834f; - --flame5: #f79a4f; - --flame6: #faaf4e; - --flame7: #edcf9e; - --flame8: #ffefae; - - /* A range of desaturated purples */ - --desatPurple0: #0f0a1f; - --desatPurple1: #231c3d; - --desatPurple2: #362d59; - --desatPurple3: #473a67; - --desatPurple4: #584774; - --desatPurple5: #64517d; - --desatPurple6: #79628c; - --desatPurple7: #846e95; - --desatPurple8: #9481a4; - --desatPurple9: #a796b4; - --desatPurple10: #bbadc6; - --desatPurple11: #c3b6ce; - --desatPurple12: #d2c7da; - --desatPurple13: #e2d9e9; - --desatPurple14: #efe8f4; - --desatPurple15: #faf8ff; - - /* saturated purples */ - --brandPink: #e1557c; - --brandLink: var(--brandPink); - --darkPink: #c83852; - --codeColor: #9c5f99; - --brandDecoration: var(--desatPurple4); - /* accents */ - --accent-purple: #6a5fc1; - --accent-md-violet: '#584774'; - --accent-purple-light: #e1dff3; - --accent-yellow: #fedb4b; - --gray: #c7c5cc; - --dark-purple: #1f1633; - /* misc */ - --jewel0: #69c289; - /* Sentry green */ - --jewel1: #007a78; - /* Darkened Sentry green */ - --lightBlue: #48a5db; - /* Sentry blue */ - - /* - Color variables -*/ - --white: #ffffff; - --lightText: #9093c1; - --highlightPurple: var(--brandLink); - --lightPurple: var(--desatPurple11); - --lightestPurple: var(--desatPurple12); - --mediumPurple: var(--desatPurple6); - --darkestPurple: var(--desatPurple0); - --darkPurple: var(--desatPurple2); - --boldRed: var(--flame0); - --textDecorationPurple: var(--brandDecoration); - --lightestPurpleBackground: rgba(210, 199, 218, 0.2); - --successGreen: var(--jewel0); - - --transition-time: 0.125s; - - --headerHeight: 4rem; - - --light-text: var(--lightText); - --lightest-purple-background: var(--lightestPurpleBackground); - - --paragraph-margin-bottom: 1rem; - --border-color: #dee2e6; - --font-family-monospace: 'Roboto Mono', SFMono-Regular, Consolas, Liberation Mono, Menlo, - Courier, monospace; - - --fade-in-animation: fadeIn; - /* https://storybook.sentry.dev/?path=/story/core-colors--page */ --gray-500: #2b2233; --gray-400: #3e3446;