generated from nl-design-system/example
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* WIP * ci: configure Utrecht CSS prefix * brand + design tokens * feat: example design tokens * Update colours.md * kleur vars toegevoegd * Update design-tokens.css * aanpassingen kleurnamen brand css * Toevoegingen aan kleuren en stylen * Update design-tokens.css Stukje van den Haag over genomen * Last * Update style.css * Link naar Utrecht * Hex to HSL * hex to hls * feat: color demo component * chore: move brand colors to proprietary directory * docs: add color examples Co-authored-by: JeroenduC <j.du.chatinier@utrecht.nl> Co-authored-by: Olling <48805670+Ollie-nl@users.noreply.github.com>
- Loading branch information
3 people
authored
Mar 17, 2021
1 parent
b963963
commit c40aef4
Showing
11 changed files
with
304 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| <link href="/brand.css" type="text/css" rel="stylesheet" /> | ||
| <link href="/storybook.css" type="text/css" rel="stylesheet" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| .demo-link { | ||
| .utrecht-link { | ||
| color: var(--demo-link-color, blue); | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .demo-link__text { | ||
| .utrecht-link__text { | ||
| margin-inline-start: 1ch; | ||
| } | ||
|
|
||
| .demo-link:hover .demo-link__text { | ||
| .utrecht-link:hover .utrecht-link__text { | ||
| border-bottom: 1px solid currentColor; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # License | ||
|
|
||
| Copyright (c) 2021 Gemeente Utrecht. All rights reserved. | ||
|
|
||
| The open source license does NOT apply to files in this directory. | ||
|
|
||
| These are properietary assets to Gemeente Utrecht. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| /** | ||
| * @license SEE LICENSE.md | ||
| * Copyright (c) 2021 Gemeente Utrecht | ||
| * All rights reserved | ||
| */ | ||
|
|
||
| /* stylelint-disable no-duplicate-selectors */ | ||
|
|
||
| /* | ||
| * Comments in this file are automatically processed by a Storybook plugin. | ||
| * Documentation for the Storybook Design Token plugin: | ||
| * https://storybook.js.org/addons/storybook-design-token | ||
| */ | ||
|
|
||
| /** | ||
| * @tokens Utrecht / Color | ||
| * @presenter Color | ||
| */ | ||
| :root { | ||
| --utrecht-rood-donker: hsl(0 100% 20%); /* donker rood */ | ||
| --utrecht-rood-basis: hsl(0 100% 40%); /* basis rood #cc0000 */ | ||
| --utrecht-rood-licht: hsl(0 100% 30%); /* hover rood */ | ||
|
|
||
| --utrecht-blauw-donker: hsl(211 60% 20%); /* basis donkerblauw */ | ||
| --utrecht-blauw-basis: hsl(211 60% 30%); /* basis link en knoppen CTA donkerblauw */ | ||
| --utrecht-blauw-licht: hsl(211 60% 40%); /* blauw variant bij hover/focus #3669a5 */ | ||
| --utrecht-blauw-super-licht: hsl(211 60% 80%); /* licht blauw voor achtergrond */ | ||
| --utrecht-blauw-ultra-licht: hsl(211 60% 90%); /* ijsblauw variant achtergrond, spotlight en uitgelicht */ | ||
|
|
||
| --utrecht-zwart: hsl(0 0% 0%); /* basis zwart */ | ||
|
|
||
| --utrecht-grijs-donker: hsl(0 0% 30%); /* Border grijs #888 */ | ||
| --utrecht-grijs-basis: hsl(0 0% 40%); /* basis grijs #727272 */ | ||
| --utrecht-grijs-licht: hsl(0 0% 80%); /* grijs variant voor achtergrond content #e5e5e5 */ | ||
| --utrecht-grijs-super-licht: hsl(0 0% 90%); /* grijs variant voor achtergrond templates #f2f2f2 */ | ||
|
|
||
| --utrecht-geel-donker: hsl(48 100% 40%); /* donker geel :( */ | ||
| --utrecht-geel-basis: hsl(48 100% 50%); /* basis geel #ffcc00 */ | ||
| --utrecht-geel-licht: hsl(48 100% 60%); /* seleceteer geel */ | ||
| --utrecht-geel-super-licht: hsl(48 100% 80%); /* spotlight en uitgelicht */ | ||
|
|
||
| --utrecht-wit: hsl(0 0% 100%); /* basis wit */ | ||
| } | ||
|
|
||
| /** | ||
| * @tokens Utrecht / Font | ||
| * @presenter FontFamily | ||
| */ | ||
| :root { | ||
| --utrecht-font-family-sans-serif: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif; | ||
| } | ||
|
|
||
| /** | ||
| * @tokens Utrecht / Font size | ||
| * @presenter FontSize | ||
| */ | ||
| :root { | ||
| --utrecht-font-size: 1.4em; | ||
| } | ||
|
|
||
| /** | ||
| * @tokens Utrecht / Font weight | ||
| * @presenter FontWeight | ||
| */ | ||
| :root { | ||
| --utrecht-font-weight: 400; | ||
| } |
Oops, something went wrong.