This wiki page is deprecated

Introduction

The idea is to have a unified system for managing the different styles (color schemes) as well as light and dark mode, to minimize time spent on things like looking up colors in the graphical guide lines and to keep the look of different components consistent across the styles, while still keeping some creative freedom in the hands of the developers.

How it works

The different styles are managed by attribute selectors/data attributes (terms will be used interchangeably) and dark and light mode are managed by the css light-dark function.

Attribute selectors

The short version of how attribute selectors work is that a set of variables are defined and assigned values. By having different sets define the same variables with different values, components can use these variables in their css to eg. change colors when the selected data set is switched.

Here is an example:

[data-style='rubine'] {
--color1: #3e1d40;
--color2: #69165e;
--color3: #b1236e;
--color4: #e9d5e4;
}

[data-style='safir'] {
--color1: #002c42;
--color2: #01476c;
--color3: #0969a8;
--color4: #c2ddf2;
}

These two both define the same variables, but assign them different values.

.component {
  background: var(--color1);
  color: var(--color2);
}

Since this component css uses the variables, it will change colors when the data set is switched.

Light-dark function

The css light-dark function works by simply assigning two different colors for light and dark mode.

background: light-dark(#f4f5f7, #333333);

A function can then be used to switch between the two.

Light and dark mode could be implemented with just the attribute selectors, but then there would be a need for two attribute selectors for each color palette.

Example of attribute selector and how they are to be used

There are already attribute selectors for the school's five color palettes. Here's one of them

[data-style='rubine'] {
--color1: #3e1d40;
--color2: #69165e;
--color3: #b1236e;
--color4: #e9d5e4;

--color-text: light-dark(var(--color1), var(--color4));

--card-color-bg: light-dark(var(--color3), var(--color2));
--card-border: 1px solid light-dark(var(--color3), var(--color2));
--card-box-shadow: 0 1px 3px light-dark(#111827, #ffffff);
--card-title-color: light-dark(var(--color1), var(--color4));

--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
--text-base: 1rem;
}

1. Color palette

The variables --color1 through --color 4 are ordered from darkest to lightest

• Use these for the css of components that you want to change colors with style
• Since all hues are ordered from dark to light, the contrast will be consistent with all different styles

2. Light/dark mode

Use the css dark-light function for components that should switch colors with light and dark mode

• Example:

color: light-dark(var(--color1), var(--color4));

3. Inheritance

Some of these variables are already inherited to components

• --font-sans and --text-base are applied at the body level. You do not need to redeclare them unless you want to override them for the component.
• Variables prefixed with --card- are used in Card.module.css. Since views inside cards inherit these, you do not need to use them yourselves.
• The reason these the card variables are defined is to give some flexibility when creating the style of cards, eg. one style can use --color1 as background for cards and another can use --color2

TLDR

• Some variables are in use by default (in the css for body and for card) and will be inherited down to the components and views unless overridden.
• If the developer wants to customize a component or view further and have it change colors with the style, use the --color1-4 variables in combination with the light-dark function.
• The developers will not have to create their own attribute selectors (unless they want to), but the current attribute selectors for the HIS color palettes were made by someone with a lacking affinity for esthetics, so feel free to take it upon yourself to change what colors are assigned to what variables to make the cards look as good as possible. The fonts should also be changed.
• Do not change the values of --color1, --color2...