Skip to content

Commit

Permalink
organize scss structure
Browse files Browse the repository at this point in the history
  • Loading branch information
kuroji-fusky committed Sep 10, 2023
1 parent a7e9dd0 commit 1b6bb03
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 66 deletions.
4 changes: 4 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"scss.lint.unknownAtRules": "ignore",
"css.lint.unknownAtRules": "ignore"
}
3 changes: 2 additions & 1 deletion apps/website/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "./globals.scss"
import "../styles/globals.scss"
import "@fortawesome/fontawesome-svg-core/styles.css"

import dynamic from "next/dynamic"
Expand All @@ -7,6 +7,7 @@ import { headers } from "next/headers"
import { Inter, Open_Sans } from "next/font/google"

import { config } from "@fortawesome/fontawesome-svg-core"

import Providers from "@/context/Providers"
import {
Analytics,
Expand Down
37 changes: 37 additions & 0 deletions apps/website/src/styles/globals.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
@use "partials";

@tailwind base;
@tailwind components;
@tailwind utilities;

svg.lucide {
pointer-events: none;
}

body {
--avatar-size: 8rem;
}

@media (min-width: 1024px) {
body {
--avatar-size: 11rem;
}
}

@layer components {
.desktop-only-lg {
@apply hidden lg:block;
}

.desktop-only-md {
@apply hidden md:block;
}

.mobile-only-lg {
@apply block lg:hidden;
}

.mobile-only-md {
@apply block md:hidden;
}
}
3 changes: 3 additions & 0 deletions apps/website/src/styles/partials/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@forward "mixins";
@forward "overrides";
@forward "themes";
10 changes: 10 additions & 0 deletions apps/website/src/styles/partials/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@mixin theme-variable-sets($theme) {
.theme-#{$theme} {
@content;
}
.theme-system {
@media (prefers-color-scheme: $theme) {
@content;
}
}
}
9 changes: 9 additions & 0 deletions apps/website/src/styles/partials/_overrides.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@use "mixins" as *;

@include theme-variable-sets(light) {
--bui-context-menu: theme("colors.100");
}

@include theme-variable-sets(dark) {
--bui-context-menu: theme("colors.200");
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,4 @@
@mixin theme-variable-sets($theme) {
.theme-#{$theme} {
@content;
}
.theme-system {
@media (prefers-color-scheme: $theme) {
@content;
}
}
}

@tailwind base;
@tailwind components;
@tailwind utilities;

svg.lucide {
pointer-events: none;
}
@use "mixins" as *;

:root {
--bui-warning: hsla(46, 99.3%, 54.6%, var(--tw-bg-opacity, 1));
Expand All @@ -25,15 +8,16 @@ svg.lucide {
--bui-success: hsla(136, 87.7%, 40.4%, var(--tw-bg-opacity, 1));
}

// * Color tone reference; can be overwritten
// * 100: background-text
// * 200: modal
// * 300: button-idle-chips
// * 400: dropdowns-text-field
// * 500: active-state
// * 600: text-emphasis
// * 700: text

@include theme-variable-sets(light) {
// * Color tone reference; can be overwritten
// * 100: background-text
// * 200: modal
// * 300: button-idle-chips
// * 400: dropdowns-text-field
// * 500: active-state
// * 600: text-emphasis
// * 700: text
--bui-100: 256, 100%, 99%;
--bui-200: 248, 88.8%, 94.6%;
--bui-300: 251, 96.4%, 85.9%;
Expand Down Expand Up @@ -67,42 +51,4 @@ svg.lucide {
--bui-warning-highlight: 46, 100%, 15.2%;
--bui-info-highlight: 212, 100%, 15.2%;
--bui-success-highlight: 136, 100%, 15%;
}

// !==== Overrides ====!
@include theme-variable-sets(light) {
--bui-context-menu: theme("colors.100");
}

@include theme-variable-sets(dark) {
--bui-context-menu: theme("colors.200");
}
// !==== Overrides END ====!

body {
--avatar-size: 8rem;
}

@media (min-width: 1024px) {
body {
--avatar-size: 11rem;
}
}

@layer components {
.desktop-only-lg {
@apply hidden lg:block;
}

.desktop-only-md {
@apply hidden md:block;
}

.mobile-only-lg {
@apply block lg:hidden;
}

.mobile-only-md {
@apply block md:hidden;
}
}
}

0 comments on commit 1b6bb03

Please sign in to comment.