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

Use Aksel variables, prepare for dark mode #764

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Use Aksel variables, prepare for dark mode #764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="no" data-environment="{{ENVIRONMENT}}" data-version="{{VERSION}}">
<html lang="no" data-environment="{{ENVIRONMENT}}" data-version="{{VERSION}}" data-theme="light">

<head>
<meta charset="UTF-8" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/access-rights/access-rights.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,5 +114,5 @@ const TableWrapper = styled.div`
const ButtonContainer = styled.div`
display: flex;
flex-direction: row;
column-gap: 16px;
column-gap: var(--a-spacing-4);
`;
6 changes: 3 additions & 3 deletions frontend/src/components/access-rights/cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ interface StyledCellProps {

const getColor = (
{ $isChecked, $isFocused, $isCurrentColumn, $isCurrentRow }: StyledCellProps,
defaultColor = 'white',
defaultColor = 'var(--a-bg-default)',
) => {
if ($isFocused || $isCurrentColumn || $isCurrentRow) {
if ($isChecked) {
Expand Down Expand Up @@ -71,8 +71,8 @@ const StyledCell = styled.td<StyledCellProps>`

const StyledCheckbox = styled.input`
display: block;
width: 32px;
height: 32px;
width: var(--a-spacing-8);
height: var(--a-spacing-8);
border: none;
margin: 0;
padding: 0;
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/access-rights/head.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const Thead = styled.thead`
position: sticky;
top: 0;
z-index: 2;
background-color: white;
background-color: var(--a-bg-default);

box-shadow:
var(--a-border-on-inverted) 0 1px 0 0,
Expand All @@ -74,7 +74,7 @@ const CONTAINER_WIDTH = NON_ANGLED_HEADER_HEIGHT;
const CONTAINER_HEIGHT = Math.sqrt(ANGLED_HEADER_WIDTH ** 2 / 2);

const StyledHeader = styled.th`
padding-left: 8px;
padding-left: var(--a-spacing-2);
vertical-align: bottom;
text-align: left;
`;
Expand All @@ -85,10 +85,10 @@ const getBackgroundColor = (props: StyledAngledHeaderDivProps) => {
}

if (props.$grey) {
return 'rgb(247, 247, 247)';
return 'var(--a-text-default)';
}

return 'white';
return 'var(--a-bg-default)';
};

interface StyledAngledHeaderDivProps {
Expand All @@ -113,7 +113,7 @@ const StyledAngledHeader = styled(StyledHeader)<StyledAngledHeaderDivProps>`
`;

const AngledHeaderDiv = styled(Label)`
padding-right: 12px;
padding-right: var(--a-spacing-3);
width: ${ANGLED_HEADER_WIDTH}px;
height: ${ANGLED_HEADER_HEIGHT}px;

Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/access-rights/row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ const StyledHeaderText = styled.span`
overflow: hidden;
height: 100%;
min-width: 100%;
padding-left: 8px;
padding-right: 8px;
padding-left: var(--a-spacing-2);
padding-right: var(--a-spacing-2);
white-space: nowrap;
align-items: center;
justify-content: left;
Expand All @@ -78,13 +78,13 @@ const StyledHeaderText = styled.span`
overflow: visible;
text-overflow: unset;
background-color: var(--a-blue-200);
box-shadow: 2px 2px 5px 0px var(--a-border-on-inverted);
box-shadow: var(--a-spacing-05) var(--a-spacing-05) 5px 0px var(--a-border-on-inverted);
width: fit-content;
}
`;

const StyledHeader = styled.th<{ $isHighlighted: boolean }>`
height: 32px;
height: var(--a-spacing-8);
border-right: 1px solid var(--a-border-on-inverted);
border-left: 1px solid var(--a-border-on-inverted);
border-bottom: 1px solid var(--a-border-on-inverted);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/admin/admin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const Admin = () => (
const StyledPageContent = styled.article`
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--a-spacing-4);
max-width: 400px;
width: 100%;
margin-left: auto;
Expand Down
28 changes: 14 additions & 14 deletions frontend/src/components/app/error-boundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,37 +82,37 @@ export class AppErrorBoundary extends Component<Props, State> {
const ErrorContainer = styled.section`
display: block;
width: fit-content;
background: var(--a-bg-default);
padding: 16px;
background-color: var(--a-bg-default);
padding: var(--a-spacing-4);
overflow-y: auto;
box-shadow: var(--a-shadow-medium);
margin-top: 32px;
margin-top: var(--a-spacing-8);
margin-left: auto;
margin-right: auto;
margin-bottom: 32px;
margin-bottom: var(--a-spacing-8);
`;

const ErrorContent = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: left;
row-gap: 8px;
row-gap: var(--a-spacing-2);
`;

const Code = styled.code`
background-color: #f5f5f5;
border: 1px solid #ddd;
background-color: var(--a-bg-subtle);
border: 1px solid var(--a-border-divider);
border-radius: var(--a-border-radius-medium);
padding-left: 4px;
padding-right: 4px;
padding-left: var(--a-spacing-1);
padding-right: var(--a-spacing-1);
`;

const CodeBlock = styled.code`
display: block;
padding: 16px;
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: var(--a-spacing-4);
background-color: var(--a-bg-subtle);
border: 1px solid var(--a-border-divider);
border-radius: var(--a-border-radius-medium);
white-space: pre-wrap;
word-break: normal;
Expand All @@ -122,9 +122,9 @@ const CodeBlock = styled.code`
const Row = styled.div`
display: flex;
flex-direction: row;
column-gap: 8px;
column-gap: var(--a-spacing-2);
`;

const StyledAlert = styled(Alert)`
margin-bottom: 16px;
margin-bottom: var(--a-spacing-4);
`;
18 changes: 16 additions & 2 deletions frontend/src/components/app/global-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,21 @@ const styles = css`
html {
box-sizing: border-box;
font-family: 'Source Sans 3', Arial, sans-serif;
font-size: 16px;
font-size: var(--a-spacing-4);

--kabal-bg-medium: var(--a-gray-200);

&[data-theme='dark'] {
--a-bg-default: var(--a-surface-inverted);
--a-bg-subtle: var(--a-grayalpha-800);
--a-surface-default: var(--a-surface-inverted);
--a-surface-subtle: var(--a-grayalpha-800);
--a-text-default: var(--a-text-on-inverted);

--kabal-bg-medium: var(--a-gray-800);

background-color: var(--a-bg-default);
}
}

*,
Expand All @@ -26,7 +40,7 @@ const styles = css`
margin: 0;
padding: 0;
overflow: hidden;
font-size: 16px;
font-size: var(--a-spacing-4);
}

#app {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/app/loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const LoaderWrapper = styled.div`
align-items: center;
height: 100vh;
width: 100vw;
background-color: #fafafa;
background-color: var(--a-surface-subtle);
`;

const Content = styled.div`
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ export const BehandlingSection = ({ label, children, testid }: Props) => {
};

const StyledBehandlingSection = styled.section`
margin-bottom: 16px;
margin-bottom: var(--a-spacing-4);
display: flex;
flex-direction: column;
gap: 4px;
gap: var(--a-spacing-1);
white-space: break-spaces;
`;
8 changes: 4 additions & 4 deletions frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const ButtonContainer = styled.div`
`;

const Container = styled.div`
margin-bottom: 16px;
margin-bottom: var(--a-spacing-4);
`;

const Popup = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {
Expand All @@ -155,7 +155,7 @@ const StyledPopup = styled.div`
const HelpTextWrapper = styled.div`
display: flex;
align-items: center;
gap: 8px;
gap: var(--a-spacing-2);
`;

const HelpTextContent = styled.div`
Expand All @@ -166,7 +166,7 @@ const HelpTextContent = styled.div`

const TagsContainer = styled.div`
display: flex;
gap: 4px;
gap: var(--a-spacing-1);
flex-wrap: wrap;
margin-top: 8px;
margin-top: var(--a-spacing-2);
`;
4 changes: 2 additions & 2 deletions frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,6 @@ export const Lovhjemmel = () => {
const StyledHeaderHelpTextWrapper = styled.div`
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
gap: var(--a-spacing-2);
margin-bottom: var(--a-spacing-2);
`;
20 changes: 10 additions & 10 deletions frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,41 @@ export const StyledLovhjemmelSelect = styled.div`
`;

export const StyledSelectedHjemler = styled.div`
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: var(--a-spacing-2);
padding-top: var(--a-spacing-2);
padding-bottom: var(--a-spacing-2);
padding-left: 1em;
border-left: 2px solid #ccc;
border-left: var(--a-spacing-05) solid var(--a-border-divider);
`;

export const StyledNoneSelected = styled.p`
color: #a0a0a0;
color: var(--a-text-subtle);
margin: 0;
`;

export const StyledSelectedList = styled.ul`
list-style: none;
padding-left: 10px;
padding-left: var(--a-spacing-2);
margin: 0;
`;

export const StyledListItem = styled.li`
margin-bottom: 0.5em;
margin-bottom: var(--a-spacing-2);

&:last-child {
margin-bottom: 0;
}
`;

export const StyledSelectedSectionHeader = styled.h3`
font-size: 16px;
font-size: 1rem;
font-weight: bold;
margin-top: 0;
margin-bottom: 0.5em;
margin-bottom: var(--a-spacing-2);
`;

export const StyledSelectedSection = styled.div`
padding-top: 1em;
padding-top: var(--a-spacing-1);

&:first-of-type {
padding-top: 0;
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,13 +109,13 @@ const EditUtfallResultat = ({ utfall, oppgaveId }: UtfallResultatProps) => {
const Container = styled.div`
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
gap: var(--a-spacing-2);
margin-bottom: var(--a-spacing-4);
align-items: flex-start;
`;

const HelpTextWrapper = styled.div`
display: flex;
align-items: center;
gap: 8px;
gap: var(--a-spacing-2);
`;
4 changes: 2 additions & 2 deletions frontend/src/components/behandling/behandlingsdialog/history/common.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ export const Reason = styled.p`
margin: 0;
padding: 0;
font-style: italic;
padding-left: 4px;
border-left: 4px solid var(--a-border-subtle);
padding-left: var(--a-spacing-1);
border-left: var(--a-spacing-1) solid var(--a-border-subtle);
`;

export const HISTORY_COLORS: Record<HistoryEventTypes, string> = {
Expand Down
Loading
Loading