Design system colors (light/dark mode) #16

New Issue

jare2473 · 2025-11-13T11:17:03+01:00

jare2473 commented

2025-11-13 11:17:03 +01:00

Add the design system colors to the codebase, as reusable variables or similar. Make sure that the solution works for both light and dark mode. This could be made using an "alias" - one variable that point to different colors depending on light/dark mode.

Resources

Color aliases

Add the design system colors to the codebase, as reusable variables or similar. Make sure that the solution works for both light and dark mode. This could be made using an "alias" - one variable that point to different colors depending on light/dark mode. --- ### Resources [Color aliases](https://www.figma.com/proto/zFYdCdtEqACZmWwfnNRNY1/Studentportalen?node-id=2472-718&t=Jdfx45Mu9l8xEMBt-1) ---

stne3960 was assigned by jare2473

2025-11-13 11:18:01 +01:00

jare2473 added the

Design system

Front end

labels 2025-11-13 11:18:07 +01:00

jare2473 added this to the Design System milestone 2025-11-13 11:18:09 +01:00

jare2473 changed title from ~~Design system colors and dark mode~~ to Design system colors (light/dark mode)

2025-11-13 11:19:29 +01:00

jare2473 commented

2025-11-14 14:43:14 +01:00

Updated Figma resource @stne3960.

If the current naming system using aliases is not compatible with tailwind, maybe a solution could be to make independent variables for dark/light mode by adding a "-light" or "-dark" suffix.

For example, Primary would be split up into primary-light and primary-dark.

Just a thought, maybe there is a better solution

Updated Figma resource @stne3960. If the current naming system using aliases is not compatible with tailwind, maybe a solution could be to make independent variables for dark/light mode by adding a "-light" or "-dark" suffix. For example, `Primary` would be split up into `primary-light` and `primary-dark`. Just a thought, maybe there is a better solution

stne3960 commented

2025-11-14 15:40:44 +01:00

@jare2473
I think I've found a viable solution to this. By defining the colors to the main css like this

@theme {
  --color-su-primary: #05305D;
  --color-su-base-canvas: #FFFFFF;
  --color-su-secondary: #34587F;
}

.dark {
  --color-su-primary: #FFFFFF;
  --color-su-base-canvas: #000000;
  --color-su-secondary: #D9D6D6;
}

We can define a button like this

<button className="bg-su-primary text-su-base-canvas hover:border-su-primary hover:bg-su-secondary">Click me</button>

@jare2473 I think I've found a viable solution to this. By defining the colors to the main css like this ```css @theme { --color-su-primary: #05305D; --color-su-base-canvas: #FFFFFF; --color-su-secondary: #34587F; } .dark { --color-su-primary: #FFFFFF; --color-su-base-canvas: #000000; --color-su-secondary: #D9D6D6; } ``` We can define a button like this ```jsx <button className="bg-su-primary text-su-base-canvas hover:border-su-primary hover:bg-su-secondary">Click me</button> ```

jare2473 commented

2025-11-14 15:55:17 +01:00

@stne3960 Alright! This is similar to what I did in my prototype. So you could maybe add a layer to yours and get the same structure, with base colors and aliases. Here is a short example:

/* =========================
   1) BASE COLORS
   ========================= */

:root {
  /* LIGHT */
  --su-sky-100: #ACDEE6;
  --su-sky-70: #C4E8ED;
  --su-sky-35: #E3F4F7;
  --su-sky-20: #EEF9FA;


  /* DARK */
  --dsv-darksky-100: #403d3d;
  --dsv-darksky-70: #2d2b2b;
  --dsv-darksky-35: #1f1e1e;
  --dsv-darksky-20: #141414;

}



/* =======================================
   2) ALIAS
   ======================================= */

:root {
  --sky-100: var(--su-sky-100);
  --sky-70: var(--su-sky-70);
  --sky-35: var(--su-sky-35);
  --sky-20: var(--su-sky-20);
}

[data-theme=dark] {
  --sky-100: var(--dsv-darksky-100);
  --sky-70: var(--dsv-darksky-70);
  --sky-35: var(--dsv-darksky-35);
  --sky-20: var(--dsv-darksky-20);
}




/* =======================================
   3) COMPONENT TOKENS
   ======================================= */
:root {
  --background-2: var(--sky-20);
  --background-2-hover: var(--sky-35);
  --background-2-selected: var(--sky-100);
  --background-3: var(--sky-70);
}

@stne3960 Alright! This is similar to what I did in my prototype. So you could maybe add a layer to yours and get the same structure, with base colors and aliases. Here is a short example: ```css /* ========================= 1) BASE COLORS ========================= */ :root { /* LIGHT */ --su-sky-100: #ACDEE6; --su-sky-70: #C4E8ED; --su-sky-35: #E3F4F7; --su-sky-20: #EEF9FA; /* DARK */ --dsv-darksky-100: #403d3d; --dsv-darksky-70: #2d2b2b; --dsv-darksky-35: #1f1e1e; --dsv-darksky-20: #141414; } /* ======================================= 2) ALIAS ======================================= */ :root { --sky-100: var(--su-sky-100); --sky-70: var(--su-sky-70); --sky-35: var(--su-sky-35); --sky-20: var(--su-sky-20); } [data-theme=dark] { --sky-100: var(--dsv-darksky-100); --sky-70: var(--dsv-darksky-70); --sky-35: var(--dsv-darksky-35); --sky-20: var(--dsv-darksky-20); } /* ======================================= 3) COMPONENT TOKENS ======================================= */ :root { --background-2: var(--sky-20); --background-2-hover: var(--sky-35); --background-2-selected: var(--sky-100); --background-3: var(--sky-70); } ```

stne3960 commented

2025-11-14 16:45:17 +01:00

We could add an additional layer. Could you elaborate on what the benefits of that would be?

This code would map directly to the color aliases linked in this issue which also map to the colors defined for buttons in issue #15

@theme {
  --color-primary: #05305D;
  --color-base-canvas: #FFFFFF;
  --color-secondary: #34587F;
  --color-sky-100: #B0DEE4;
  --color-sky-80: #C7E8ED;
  --color-sky-35: #E4F4F7;
  --color-sky-25: #EFF9FA;
  --color-base-ink-strong: #4B4B4B;
  --color-base-ink-medium: #BABABA;
  --color-base-ink-soft: #DADADA;
  --color-base-ink-placeholder: #757575;
  --color-other-red-100: #AA1227;
  --color-other-red-10: #F6E6E8;
  --color-other-green: #539848;
}

.dark {
  --color-primary: #FFFFFF;
  --color-base-canvas: #000000;
  --color-secondary: #D9D6D6;
  --color-sky-100: #403D3D;
  --color-sky-80: #2D2B2B;
  --color-sky-35: #1F1E1E;
  --color-sky-25: #141414;
  --color-base-ink-strong: #FFFFFF;
  --color-base-ink-medium: #636363;
  --color-base-ink-soft: #555555;
  --color-base-ink-placeholder: #959595;
  --color-other-red-100: #AA1227;
  --color-other-red-10: #F6E6E8;
  --color-other-green: #539848; 
}

We could add an additional layer. Could you elaborate on what the benefits of that would be? This code would map directly to the color aliases linked in this issue which also map to the colors defined for buttons in issue #15 ```css @theme { --color-primary: #05305D; --color-base-canvas: #FFFFFF; --color-secondary: #34587F; --color-sky-100: #B0DEE4; --color-sky-80: #C7E8ED; --color-sky-35: #E4F4F7; --color-sky-25: #EFF9FA; --color-base-ink-strong: #4B4B4B; --color-base-ink-medium: #BABABA; --color-base-ink-soft: #DADADA; --color-base-ink-placeholder: #757575; --color-other-red-100: #AA1227; --color-other-red-10: #F6E6E8; --color-other-green: #539848; } .dark { --color-primary: #FFFFFF; --color-base-canvas: #000000; --color-secondary: #D9D6D6; --color-sky-100: #403D3D; --color-sky-80: #2D2B2B; --color-sky-35: #1F1E1E; --color-sky-25: #141414; --color-base-ink-strong: #FFFFFF; --color-base-ink-medium: #636363; --color-base-ink-soft: #555555; --color-base-ink-placeholder: #959595; --color-other-red-100: #AA1227; --color-other-red-10: #F6E6E8; --color-other-green: #539848; } ```

jare2473 commented

2025-11-17 09:57:48 +01:00

My impression is that it seems to be a bit of "best practice". Also for me it makes sense to first define the colors themselves, and then "combine" them into an alias. And as for now, this is how I have the colors set up in Figma, so it would map to that as well.

But feel free to implement this the way that feels best to you

My impression is that it seems to be a bit of "best practice". Also for me it makes sense to first define the colors themselves, and then "combine" them into an alias. And as for now, this is how I have the colors set up in Figma, so it would map to that as well. But feel free to implement this the way that feels best to you

stne3960 referenced this issue

2025-11-30 17:38:56 +01:00

button-component #29

jare2473 added this to the Design -> Front end project 2025-12-03 16:24:03 +01:00

jare2473 moved this to Code review in Design -> Front end on 2025-12-03 16:24:24 +01:00

jare2473 moved this to Code review in Design -> Front end on 2025-12-04 11:07:11 +01:00

jare2473 moved this to Code review in Design -> Front end on 2025-12-04 13:29:00 +01:00

jare2473 moved this to Code review in Design -> Front end on 2025-12-04 13:29:02 +01:00

jare2473 moved this to Code review in Design -> Front end on 2025-12-04 13:29:05 +01:00

jare2473 moved this to Code review in Design -> Front end on 2025-12-04 13:29:07 +01:00

jare2473 moved this to Code review in Design -> Front end on 2025-12-04 13:29:10 +01:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DMC/studentportalen#16