entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 9 Releases Wiki Activity

dsfr: add extraction and usage of colours (#61352)

This commit is contained in:
Frédéric Péters 2022-03-17 20:08:30 +01:00
parent c5124a6907
commit acab7e7d81
4 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
static/dsfr/_colours.scss Normal file
View File

@ -0,0 +1,22 @@
$dsfr-colours: (
beige-gris-galet: (background-contrast: #f3ede5, border-default: #aea397, background-alt: #f9f6f2),
blue-cumulus: (background-contrast: #e6eefe, border-default: #417dc4, background-alt: #f3f6fe),
blue-ecume: (background-contrast: #e9edfe, border-default: #465f9d, background-alt: #f4f6fe),
blue-france: (background-contrast: #ececfe, border-default: #6a6af4, background-alt: #f5f5fe),
brown-cafe-creme: (background-contrast: #f7ecdb, border-default: #d1b781, background-alt: #fbf6ed),
brown-caramel: (background-contrast: #f7ebe5, border-default: #c08c65, background-alt: #fbf5f2),
brown-opera: (background-contrast: #f7ece4, border-default: #bd987a, background-alt: #fbf5f2),
green-archipel: (background-contrast: #c7f6fc, border-default: #009099, background-alt: #e5fbfd),
green-bourgeon: (background-contrast: #c9fcac, border-default: #68a532, background-alt: #e6feda),
green-emeraude: (background-contrast: #c3fad5, border-default: #00a95f, background-alt: #e3fdeb),
green-menthe: (background-contrast: #bafaee, border-default: #009081, background-alt: #dffdf7),
green-tilleul-verveine: (background-contrast: #fceeac, border-default: #b7a73f, background-alt: #fef7da),
grey: (background-contrast: #eee, border-default: #e5e5e5, background-alt: #f6f6f6),
orange-terre-battue: (background-contrast: #fee9e5, border-default: #e4794a, background-alt: #fef4f2),
pink-macaron: (background-contrast: #fee9e6, border-default: #e18b76, background-alt: #fef4f2),
pink-tuile: (background-contrast: #fee9e7, border-default: #ce614a, background-alt: #fef4f3),
purple-glycine: (background-contrast: #fee7fc, border-default: #a558a0, background-alt: #fef3fd),
red-marianne: (background-contrast: #fee9e9, border-default: #e1000f, background-alt: #fef4f4),
yellow-moutarde: (background-contrast: #feebd0, border-default: #c3992a, background-alt: #fef5e8),
yellow-tournesol: (background-contrast: #feecc2, border-default: #c8aa39, background-alt: #fef6e3),
)

12
static/dsfr/_custom.scss
View File

@ -392,6 +392,12 @@ div.gru-content div#rub_service {
color: $font-color;
background-color: $background-contrast-grey;
box-shadow: inset .25rem 0 0 $border-default-blue-france;
@each $name, $colours in $dsfr-colours {
&.fr-callout--#{$name} {
background: map_get($colours, "background-contrast");
box-shadow: inset 0.25rem 0 0 0 map_get($colours, "border-default");
}
}
padding: 2rem 3rem;
@media screen and ($max-mobile-viewport) {
padding: 1.5rem;
@ -633,3 +639,9 @@ div.fileinfo a.remove::before {
.successnotice, #messages li.success {
&::before { background-image: url(success-fill.svg); }
}
@each $name, $colours in $dsfr-colours {
.background-alt-#{$name} {
background: map_get($colours, "background-alt");
}
}

43
static/dsfr/extract-colours.py Normal file
View File

@ -0,0 +1,43 @@
#! /usr/bin/python3
# usage: path to core.css (from unzipped dsfrvX.Y.Z.zip archive),
# for example python3 extract-colours.py dsfr-1.4.0/dist/core/core.css
import re
import sys
colours = {}
with open(sys.argv[1]) as fd:
core_content = fd.read()
for colour_name in re.findall('background-alt-(.*):', core_content):
if colour_name.endswith('-hover') or colour_name.endswith('-active'):
continue
if colour_name.startswith('-'):
continue
colours[colour_name] = {}
for colour_name in colours.keys():
varname1 = re.findall(r'--background-contrast-%s: var\((.*)\)' % colour_name, core_content)[0]
varname2 = re.findall(r'--border-default-%s: var\((.*)\)' % colour_name, core_content)[0]
varname3 = re.findall(r'--background-alt-%s: var\((.*)\)' % colour_name, core_content)[0]
colours[colour_name]['background-contrast'] = re.findall(r'%s: (#.*);' % varname1, core_content)[0]
colours[colour_name]['border-default'] = re.findall(r'%s: (#.*);' % varname2, core_content)[0]
colours[colour_name]['background-alt'] = re.findall(r'%s: (#.*);' % varname3, core_content)[0]
with open('_colours.scss', 'w') as fd:
print('# generated by extract-colours.py, do not edit.', file=fd)
print('$dsfr-colours: (', file=fd)
for colour_name in sorted(colours.keys()):
print(
' %s: (background-contrast: %s, border-default: %s, background-alt: %s),'
% (
colour_name,
colours[colour_name]['background-contrast'],
colours[colour_name]['border-default'],
colours[colour_name]['background-alt'],
),
file=fd,
)
print(')', file=fd)

1
static/dsfr/style.scss
View File

@ -1,5 +1,6 @@
@charset "UTF-8";
@import 'colours';
@import 'vars';
@import '../includes/publik';
@import 'custom';