Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: themebuilder redesign #2740

Draft
wants to merge 27 commits into
base: next
Choose a base branch
from
+2,221 −848
Draft

chore: themebuilder redesign #2740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
da4833e
Stuff
Thunear Nov 5, 2024
6da0a67
Sync
Thunear Nov 5, 2024
344f33d
Merge branch 'next' into chore/themebuilder-v2
Thunear Nov 6, 2024
f092cd4
More stuff
Thunear Nov 7, 2024
73d9a5e
Added color functionality
Thunear Nov 11, 2024
22db994
Merge branch 'next' into chore/themebuilder-v2
Thunear Nov 11, 2024
f2180cc
Update Components.tsx
Thunear Nov 11, 2024
8ddb6b8
Removed toolbar
Thunear Nov 11, 2024
a87a960
Update index.ts
Thunear Nov 11, 2024
2bf964d
Added list grid
Thunear Nov 11, 2024
e41e420
Update ColorPreview.module.css
Thunear Nov 11, 2024
8e9cfd2
Stuff
Thunear Nov 11, 2024
e739fb0
Update ColorPane.module.css
Thunear Nov 11, 2024
bbb1afe
Update Color.module.css
Thunear Nov 11, 2024
394e58d
Fixes
Thunear Nov 12, 2024
af494df
Fix type
Thunear Nov 12, 2024
a0f2971
More stuff
Thunear Nov 13, 2024
dd287c6
Stuff
Thunear Nov 13, 2024
2c35287
Spacing
Thunear Nov 13, 2024
8e612f2
sync
Thunear Nov 13, 2024
9b5b664
Sync
Thunear Nov 18, 2024
b4e0d2b
Stuff
Thunear Nov 18, 2024
1763190
Merge branch 'next' into chore/themebuilder-v2
Thunear Nov 18, 2024
3e63d78
Stuff
Thunear Nov 18, 2024
392e607
Update ColorPreview.module.css
Thunear Nov 18, 2024
3f060f6
Some fixes
Thunear Nov 18, 2024
a326572
Sync
Thunear Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/_components/src/Container/Container.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.container {
max-width: var(--grid-max-width, 1620px);
max-width: var(--grid-max-width, 1500px);
margin: 0 auto;
width: 100%;
padding-left: var(--grid-padding, 16px);
Expand Down
1 change: 0 additions & 1 deletion apps/_components/src/Header/Header.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
position: relative;
z-index: 5;
background-color: var(--ds-color-neutral-background-default);

[data-ds-color-mode='dark'] &,
[data-ds-color-mode='auto'] & {
background-color: var(--ds-color-neutral-background-subtle);
Expand Down
38 changes: 36 additions & 2 deletions apps/theme/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,40 @@ code {
border-radius: 2px;
}

.content {
min-height: 100vh;
[data-theme='two'] {
--ds-color-accent-base-default: red;
}

.panelContainer {
display: flex;
}

.panelLeft {
display: flex;
flex-direction: column;
gap: 12px;
width: 420px;
padding: 28px;
border-right: 1px solid var(--ds-color-neutral-border-subtle);
position: relative;
}

.panelRight {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: min-content;
width: 100%;
gap: 12px;
padding: 28px;
background-color: var(--ds-color-neutral-background-subtle);
border-radius: 0 8px 8px 0;
}

.panelBottom {
left: 0;
right: 0;
bottom: 0;
padding: 28px;
position: absolute;
border-top: 1px solid var(--ds-color-neutral-border-subtle);
}
10 changes: 7 additions & 3 deletions apps/theme/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import type { Metadata } from 'next';
import './globals.css';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-theme';
import 'react-color-palette/css';
import { EnvelopeClosedIcon } from '@navikt/aksel-icons';
import { Figma, Footer, Github, Header, Slack } from '@repo/components';
import { ThemeWrapper } from '../components/ThemeWrapper/ThemeWrapper';

export const metadata: Metadata = {
title: 'Temabygger - Designsystemet',
Expand Down Expand Up @@ -67,9 +69,11 @@ export default function RootLayout({
return (
<html lang='no'>
<body>
<Header menu={menu} betaTag />
<div className='content'>{children}</div>
<Footer centerLinks={centerLinks} rightLinks={rightLinks} />
<ThemeWrapper>
<Header menu={menu} betaTag />
<div className='content'>{children}</div>
<Footer centerLinks={centerLinks} rightLinks={rightLinks} />
</ThemeWrapper>
</body>
</html>
);
Expand Down
133 changes: 15 additions & 118 deletions apps/theme/app/page.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,134 +1,31 @@
.main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 4px;
margin-bottom: 100px;
font-size: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 20.33%, rgba(30, 152, 245, 0.2) 57.04%);
}

.container {
max-width: 1600px;
.header {
width: 600px;
margin: 0 auto;
width: 100%;
}

.colors {
display: flex;
}

.top {
display: flex;
}

.swatchContainer {
border: 1px solid #c0c0c0;
height: 260px;
width: 495px;
padding: 20px;
margin-right: 32px;
border-radius: 4px;
gap: 20px;
display: flex;
flex-direction: column;
}

.tom {
display: flex;
align-items: center;
gap: 16px;
font-size: 16px;
}

.swatch {
height: 30px;
width: 30px;
border-radius: 50%;
}

.swatch:hover {
cursor: pointer;
}

.swatches {
display: flex;
align-items: center;
gap: 10px;
}

.box {
display: flex;
align-items: end;
justify-content: center;
gap: 32px;
padding: 12px 80px 40px;
border-radius: 8px;
}

.title {
text-align: center;
margin-bottom: 36px;
font-size: 32px;
font-weight: 500;
margin-top: 0;
}

.test2 {
display: flex;
align-items: center;
justify-content: center;
}

.test {
margin-bottom: 16px;
font-size: 21px;
border-radius: 2px;
font-weight: 400;
color: rgb(104, 104, 104);
letter-spacing: 0.5px;
margin-top: var(--ds-spacing-5);
}

.tokens {
margin-top: 40px;
.heading {
margin-top: var(--ds-spacing-1);
}

.tokens h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
.desc {
margin-top: var(--ds-spacing-5);
}

.tokens h2 {
font-size: 22px;
margin-bottom: 0;
}

.token {
font-size: 16px;
}

.token div {
margin-bottom: 6px;
}

.brandRow {
margin-top: 24px;
}

.contrastSection {
.btnGroup {
display: flex;
gap: 20px;
align-items: center;
gap: 2px;
height: 52px;
width: 85px;
font-size: 16px;
}

.contrastSection svg {
color: #c90000;
justify-content: center;
margin-top: var(--ds-spacing-7);
}

.contrastSectionSuccess svg {
color: #090;
.headerText {
color: var(--ds-color-accent-base-default);
font-weight: 600;
}
Loading
Loading