Tracking de l'application VApp (IHM du jeu)

This commit is contained in:
2025-05-11 18:04:12 +02:00
commit 89e9db9b62
17763 changed files with 3718499 additions and 0 deletions

View File

@ -0,0 +1,849 @@
@use '../tools/functions' as *;
$shades: () !default;
$shades: map-deep-merge(
(
'black': #000000,
'white': #FFFFFF,
'transparent': transparent
),
$shades
);
$text-on-shades: () !default;
$text-on-shades: map-deep-merge(
(
'black': map-get($shades, 'white'),
'white': map-get($shades, 'black'),
'transparent': currentColor
),
$text-on-shades
);
$red: () !default;
$red: map-deep-merge(
(
'base': #F44336,
'lighten-5': #FFEBEE,
'lighten-4': #FFCDD2,
'lighten-3': #EF9A9A,
'lighten-2': #E57373,
'lighten-1': #EF5350,
'darken-1': #E53935,
'darken-2': #D32F2F,
'darken-3': #C62828,
'darken-4': #B71C1C,
'accent-1': #FF8A80,
'accent-2': #FF5252,
'accent-3': #FF1744,
'accent-4': #D50000
),
$red
);
$text-on-red: () !default;
$text-on-red: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-red
);
$pink: () !default;
$pink: map-deep-merge(
(
'base': #e91e63,
'lighten-5': #fce4ec,
'lighten-4': #f8bbd0,
'lighten-3': #f48fb1,
'lighten-2': #f06292,
'lighten-1': #ec407a,
'darken-1': #d81b60,
'darken-2': #c2185b,
'darken-3': #ad1457,
'darken-4': #880e4f,
'accent-1': #ff80ab,
'accent-2': #ff4081,
'accent-3': #f50057,
'accent-4': #c51162
),
$pink
);
$text-on-pink: () !default;
$text-on-pink: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'white'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-pink
);
$purple: () !default;
$purple: map-deep-merge(
(
'base': #9c27b0,
'lighten-5': #f3e5f5,
'lighten-4': #e1bee7,
'lighten-3': #ce93d8,
'lighten-2': #ba68c8,
'lighten-1': #ab47bc,
'darken-1': #8e24aa,
'darken-2': #7b1fa2,
'darken-3': #6a1b9a,
'darken-4': #4a148c,
'accent-1': #ea80fc,
'accent-2': #e040fb,
'accent-3': #d500f9,
'accent-4': #aa00ff
),
$purple
);
$text-on-purple: () !default;
$text-on-purple: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'white'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'white'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-purple
);
$deep-purple: () !default;
$deep-purple: map-deep-merge(
(
'base': #673ab7,
'lighten-5': #ede7f6,
'lighten-4': #d1c4e9,
'lighten-3': #b39ddb,
'lighten-2': #9575cd,
'lighten-1': #7e57c2,
'darken-1': #5e35b1,
'darken-2': #512da8,
'darken-3': #4527a0,
'darken-4': #311b92,
'accent-1': #b388ff,
'accent-2': #7c4dff,
'accent-3': #651fff,
'accent-4': #6200ea
),
$deep-purple
);
$text-on-deep-purple: () !default;
$text-on-deep-purple: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'white'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'white'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-deep-purple
);
$indigo: () !default;
$indigo: map-deep-merge(
(
'base': #3f51b5,
'lighten-5': #e8eaf6,
'lighten-4': #c5cae9,
'lighten-3': #9fa8da,
'lighten-2': #7986cb,
'lighten-1': #5c6bc0,
'darken-1': #3949ab,
'darken-2': #303f9f,
'darken-3': #283593,
'darken-4': #1a237e,
'accent-1': #8c9eff,
'accent-2': #536dfe,
'accent-3': #3d5afe,
'accent-4': #304ffe
),
$indigo
);
$text-on-indigo: () !default;
$text-on-indigo: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'white'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'white'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-indigo
);
$blue: () !default;
$blue: map-deep-merge(
(
'base': #2196F3,
'lighten-5': #E3F2FD,
'lighten-4': #BBDEFB,
'lighten-3': #90CAF9,
'lighten-2': #64B5F6,
'lighten-1': #42A5F5,
'darken-1': #1E88E5,
'darken-2': #1976D2,
'darken-3': #1565C0,
'darken-4': #0D47A1,
'accent-1': #82B1FF,
'accent-2': #448AFF,
'accent-3': #2979FF,
'accent-4': #2962FF,
),
$blue
);
$text-on-blue: () !default;
$text-on-blue: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-blue
);
$light-blue: () !default;
$light-blue: map-deep-merge(
(
'base': #03a9f4,
'lighten-5': #e1f5fe,
'lighten-4': #b3e5fc,
'lighten-3': #81d4fa,
'lighten-2': #4fc3f7,
'lighten-1': #29b6f6,
'darken-1': #039be5,
'darken-2': #0288d1,
'darken-3': #0277bd,
'darken-4': #01579b,
'accent-1': #80d8ff,
'accent-2': #40c4ff,
'accent-3': #00b0ff,
'accent-4': #0091ea
),
$light-blue
);
$text-on-light-blue: () !default;
$text-on-light-blue: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-light-blue
);
$cyan: () !default;
$cyan: map-deep-merge(
(
'base': #00bcd4,
'lighten-5': #e0f7fa,
'lighten-4': #b2ebf2,
'lighten-3': #80deea,
'lighten-2': #4dd0e1,
'lighten-1': #26c6da,
'darken-1': #00acc1,
'darken-2': #0097a7,
'darken-3': #00838f,
'darken-4': #006064,
'accent-1': #84ffff,
'accent-2': #18ffff,
'accent-3': #00e5ff,
'accent-4': #00b8d4
),
$cyan
);
$text-on-cyan: () !default;
$text-on-cyan: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'white')
),
$text-on-cyan
);
$teal: () !default;
$teal: map-deep-merge(
(
'base': #009688,
'lighten-5': #e0f2f1,
'lighten-4': #b2dfdb,
'lighten-3': #80cbc4,
'lighten-2': #4db6ac,
'lighten-1': #26a69a,
'darken-1': #00897b,
'darken-2': #00796b,
'darken-3': #00695c,
'darken-4': #004d40,
'accent-1': #a7ffeb,
'accent-2': #64ffda,
'accent-3': #1de9b6,
'accent-4': #00bfa5
),
$teal
);
$text-on-teal: () !default;
$text-on-teal: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'white')
),
$text-on-teal
);
$green: () !default;
$green: map-deep-merge(
(
'base': #4CAF50,
'lighten-5': #E8F5E9,
'lighten-4': #C8E6C9,
'lighten-3': #A5D6A7,
'lighten-2': #81C784,
'lighten-1': #66BB6A,
'darken-1': #43A047,
'darken-2': #388E3C,
'darken-3': #2E7D32,
'darken-4': #1B5E20,
'accent-1': #B9F6CA,
'accent-2': #69F0AE,
'accent-3': #00E676,
'accent-4': #00C853
),
$green
);
$text-on-green: () !default;
$text-on-green: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-green
);
$light-green: () !default;
$light-green: map-deep-merge(
(
'base': #8bc34a,
'lighten-5': #f1f8e9,
'lighten-4': #dcedc8,
'lighten-3': #c5e1a5,
'lighten-2': #aed581,
'lighten-1': #9ccc65,
'darken-1': #7cb342,
'darken-2': #689f38,
'darken-3': #558b2f,
'darken-4': #33691e,
'accent-1': #ccff90,
'accent-2': #b2ff59,
'accent-3': #76ff03,
'accent-4': #64dd17
),
$light-green
);
$text-on-light-green: () !default;
$text-on-light-green: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-light-green
);
$lime: () !default;
$lime: map-deep-merge(
(
'base': #cddc39,
'lighten-5': #f9fbe7,
'lighten-4': #f0f4c3,
'lighten-3': #e6ee9c,
'lighten-2': #dce775,
'lighten-1': #d4e157,
'darken-1': #c0ca33,
'darken-2': #afb42b,
'darken-3': #9e9d24,
'darken-4': #827717,
'accent-1': #f4ff81,
'accent-2': #eeff41,
'accent-3': #c6ff00,
'accent-4': #aeea00
),
$lime
);
$text-on-lime: () !default;
$text-on-lime: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'black'),
'darken-2': map-get($shades, 'black'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-lime
);
$yellow: () !default;
$yellow: map-deep-merge(
(
'base': #ffeb3b,
'lighten-5': #fffde7,
'lighten-4': #fff9c4,
'lighten-3': #fff59d,
'lighten-2': #fff176,
'lighten-1': #ffee58,
'darken-1': #fdd835,
'darken-2': #fbc02d,
'darken-3': #f9a825,
'darken-4': #f57f17,
'accent-1': #ffff8d,
'accent-2': #ffff00,
'accent-3': #ffea00,
'accent-4': #ffd600
),
$yellow
);
$text-on-yellow: () !default;
$text-on-yellow: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'black'),
'darken-2': map-get($shades, 'black'),
'darken-3': map-get($shades, 'black'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-yellow
);
$amber: () !default;
$amber: map-deep-merge(
(
'base': #ffc107,
'lighten-5': #fff8e1,
'lighten-4': #ffecb3,
'lighten-3': #ffe082,
'lighten-2': #ffd54f,
'lighten-1': #ffca28,
'darken-1': #ffb300,
'darken-2': #ffa000,
'darken-3': #ff8f00,
'darken-4': #ff6f00,
'accent-1': #ffe57f,
'accent-2': #ffd740,
'accent-3': #ffc400,
'accent-4': #ffab00
),
$amber
);
$text-on-amber: () !default;
$text-on-amber: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'black'),
'darken-2': map-get($shades, 'black'),
'darken-3': map-get($shades, 'black'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-amber
);
$orange: () !default;
$orange: map-deep-merge(
(
'base': #ff9800,
'lighten-5': #fff3e0,
'lighten-4': #ffe0b2,
'lighten-3': #ffcc80,
'lighten-2': #ffb74d,
'lighten-1': #ffa726,
'darken-1': #fb8c00,
'darken-2': #f57c00,
'darken-3': #ef6c00,
'darken-4': #e65100,
'accent-1': #ffd180,
'accent-2': #ffab40,
'accent-3': #ff9100,
'accent-4': #ff6d00
),
$orange
);
$text-on-orange: () !default;
$text-on-orange: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'white')
),
$text-on-orange
);
$deep-orange: () !default;
$deep-orange: map-deep-merge(
(
'base': #ff5722,
'lighten-5': #fbe9e7,
'lighten-4': #ffccbc,
'lighten-3': #ffab91,
'lighten-2': #ff8a65,
'lighten-1': #ff7043,
'darken-1': #f4511e,
'darken-2': #e64a19,
'darken-3': #d84315,
'darken-4': #bf360c,
'accent-1': #ff9e80,
'accent-2': #ff6e40,
'accent-3': #ff3d00,
'accent-4': #dd2c00
),
$deep-orange
);
$text-on-deep-orange: () !default;
$text-on-deep-orange: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-deep-orange
);
$brown: () !default;
$brown: map-deep-merge(
(
'base': #795548,
'lighten-5': #efebe9,
'lighten-4': #d7ccc8,
'lighten-3': #bcaaa4,
'lighten-2': #a1887f,
'lighten-1': #8d6e63,
'darken-1': #6d4c41,
'darken-2': #5d4037,
'darken-3': #4e342e,
'darken-4': #3e2723
),
$brown
);
$text-on-brown: () !default;
$text-on-brown: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white')
),
$text-on-brown
);
$blue-grey: () !default;
$blue-grey: map-deep-merge(
(
'base': #607d8b,
'lighten-5': #eceff1,
'lighten-4': #cfd8dc,
'lighten-3': #b0bec5,
'lighten-2': #90a4ae,
'lighten-1': #78909c,
'darken-1': #546e7a,
'darken-2': #455a64,
'darken-3': #37474f,
'darken-4': #263238
),
$blue-grey
);
$text-on-blue-grey: () !default;
$text-on-blue-grey: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white')
),
$text-on-blue-grey
);
$grey: () !default;
$grey: map-deep-merge(
(
'base': #9e9e9e,
'lighten-5': #fafafa,
'lighten-4': #f5f5f5,
'lighten-3': #eeeeee,
'lighten-2': #e0e0e0,
'lighten-1': #bdbdbd,
'darken-1': #757575,
'darken-2': #616161,
'darken-3': #424242,
'darken-4': #212121
),
$grey
);
$text-on-grey: () !default;
$text-on-grey: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white')
),
$text-on-grey
);
$colors: () !default;
$colors: map-deep-merge(
(
'red': $red,
'pink': $pink,
'purple': $purple,
'deep-purple': $deep-purple,
'indigo': $indigo,
'blue': $blue,
'light-blue': $light-blue,
'cyan': $cyan,
'teal': $teal,
'green': $green,
'light-green': $light-green,
'lime': $lime,
'yellow': $yellow,
'amber': $amber,
'orange': $orange,
'deep-orange': $deep-orange,
'brown': $brown,
'blue-grey': $blue-grey,
'grey': $grey,
'shades': $shades
),
$colors
);
$text-on-colors: () !default;
$text-on-colors: map-deep-merge(
(
'red': $text-on-red,
'pink': $text-on-pink,
'purple': $text-on-purple,
'deep-purple': $text-on-deep-purple,
'indigo': $text-on-indigo,
'blue': $text-on-blue,
'light-blue': $text-on-light-blue,
'cyan': $text-on-cyan,
'teal': $text-on-teal,
'green': $text-on-green,
'light-green': $text-on-light-green,
'lime': $text-on-lime,
'yellow': $text-on-yellow,
'amber': $text-on-amber,
'orange': $text-on-orange,
'deep-orange': $text-on-deep-orange,
'brown': $text-on-brown,
'blue-grey': $text-on-blue-grey,
'grey': $text-on-grey,
'shades': $text-on-shades
),
$text-on-colors
);

View File

@ -0,0 +1,101 @@
@use '../tools/functions' as *;
$shadow-key-umbra-opacity: var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)) !default;
$shadow-key-penumbra-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)) !default;
$shadow-key-ambient-opacity: var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !default;
$shadow-key-umbra: () !default;
$shadow-key-umbra: map-deep-merge(
(
0: (0px 0px 0px 0px $shadow-key-umbra-opacity),
1: (0px 2px 1px -1px $shadow-key-umbra-opacity),
2: (0px 3px 1px -2px $shadow-key-umbra-opacity),
3: (0px 3px 3px -2px $shadow-key-umbra-opacity),
4: (0px 2px 4px -1px $shadow-key-umbra-opacity),
5: (0px 3px 5px -1px $shadow-key-umbra-opacity),
6: (0px 3px 5px -1px $shadow-key-umbra-opacity),
7: (0px 4px 5px -2px $shadow-key-umbra-opacity),
8: (0px 5px 5px -3px $shadow-key-umbra-opacity),
9: (0px 5px 6px -3px $shadow-key-umbra-opacity),
10: (0px 6px 6px -3px $shadow-key-umbra-opacity),
11: (0px 6px 7px -4px $shadow-key-umbra-opacity),
12: (0px 7px 8px -4px $shadow-key-umbra-opacity),
13: (0px 7px 8px -4px $shadow-key-umbra-opacity),
14: (0px 7px 9px -4px $shadow-key-umbra-opacity),
15: (0px 8px 9px -5px $shadow-key-umbra-opacity),
16: (0px 8px 10px -5px $shadow-key-umbra-opacity),
17: (0px 8px 11px -5px $shadow-key-umbra-opacity),
18: (0px 9px 11px -5px $shadow-key-umbra-opacity),
19: (0px 9px 12px -6px $shadow-key-umbra-opacity),
20: (0px 10px 13px -6px $shadow-key-umbra-opacity),
21: (0px 10px 13px -6px $shadow-key-umbra-opacity),
22: (0px 10px 14px -6px $shadow-key-umbra-opacity),
23: (0px 11px 14px -7px $shadow-key-umbra-opacity),
24: (0px 11px 15px -7px $shadow-key-umbra-opacity)
),
$shadow-key-umbra
);
$shadow-key-penumbra: () !default;
$shadow-key-penumbra: map-deep-merge(
(
0: (0px 0px 0px 0px $shadow-key-penumbra-opacity),
1: (0px 1px 1px 0px $shadow-key-penumbra-opacity),
2: (0px 2px 2px 0px $shadow-key-penumbra-opacity),
3: (0px 3px 4px 0px $shadow-key-penumbra-opacity),
4: (0px 4px 5px 0px $shadow-key-penumbra-opacity),
5: (0px 5px 8px 0px $shadow-key-penumbra-opacity),
6: (0px 6px 10px 0px $shadow-key-penumbra-opacity),
7: (0px 7px 10px 1px $shadow-key-penumbra-opacity),
8: (0px 8px 10px 1px $shadow-key-penumbra-opacity),
9: (0px 9px 12px 1px $shadow-key-penumbra-opacity),
10: (0px 10px 14px 1px $shadow-key-penumbra-opacity),
11: (0px 11px 15px 1px $shadow-key-penumbra-opacity),
12: (0px 12px 17px 2px $shadow-key-penumbra-opacity),
13: (0px 13px 19px 2px $shadow-key-penumbra-opacity),
14: (0px 14px 21px 2px $shadow-key-penumbra-opacity),
15: (0px 15px 22px 2px $shadow-key-penumbra-opacity),
16: (0px 16px 24px 2px $shadow-key-penumbra-opacity),
17: (0px 17px 26px 2px $shadow-key-penumbra-opacity),
18: (0px 18px 28px 2px $shadow-key-penumbra-opacity),
19: (0px 19px 29px 2px $shadow-key-penumbra-opacity),
20: (0px 20px 31px 3px $shadow-key-penumbra-opacity),
21: (0px 21px 33px 3px $shadow-key-penumbra-opacity),
22: (0px 22px 35px 3px $shadow-key-penumbra-opacity),
23: (0px 23px 36px 3px $shadow-key-penumbra-opacity),
24: (0px 24px 38px 3px $shadow-key-penumbra-opacity)
),
$shadow-key-penumbra
);
$shadow-key-ambient: () !default;
$shadow-key-ambient: map-deep-merge(
(
0: (0px 0px 0px 0px $shadow-key-ambient-opacity),
1: (0px 1px 3px 0px $shadow-key-ambient-opacity),
2: (0px 1px 5px 0px $shadow-key-ambient-opacity),
3: (0px 1px 8px 0px $shadow-key-ambient-opacity),
4: (0px 1px 10px 0px $shadow-key-ambient-opacity),
5: (0px 1px 14px 0px $shadow-key-ambient-opacity),
6: (0px 1px 18px 0px $shadow-key-ambient-opacity),
7: (0px 2px 16px 1px $shadow-key-ambient-opacity),
8: (0px 3px 14px 2px $shadow-key-ambient-opacity),
9: (0px 3px 16px 2px $shadow-key-ambient-opacity),
10: (0px 4px 18px 3px $shadow-key-ambient-opacity),
11: (0px 4px 20px 3px $shadow-key-ambient-opacity),
12: (0px 5px 22px 4px $shadow-key-ambient-opacity),
13: (0px 5px 24px 4px $shadow-key-ambient-opacity),
14: (0px 5px 26px 4px $shadow-key-ambient-opacity),
15: (0px 6px 28px 5px $shadow-key-ambient-opacity),
16: (0px 6px 30px 5px $shadow-key-ambient-opacity),
17: (0px 6px 32px 5px $shadow-key-ambient-opacity),
18: (0px 7px 34px 6px $shadow-key-ambient-opacity),
19: (0px 7px 36px 6px $shadow-key-ambient-opacity),
20: (0px 8px 38px 7px $shadow-key-ambient-opacity),
21: (0px 8px 40px 7px $shadow-key-ambient-opacity),
22: (0px 8px 42px 7px $shadow-key-ambient-opacity),
23: (0px 9px 44px 8px $shadow-key-ambient-opacity),
24: (0px 9px 46px 8px $shadow-key-ambient-opacity)
),
$shadow-key-ambient
);

View File

@ -0,0 +1,4 @@
@forward './variables'
@forward './colors'
@forward './elevations'
@forward './utilities'

View File

@ -0,0 +1,588 @@
@use 'sass:map';
@use './variables';
@use '../tools/functions' as *;
$utilities: () !default;
@if ($utilities != false) {
$utilities: map-deep-merge(
(
// Display utilities
"overflow": (
property: overflow,
values: auto hidden visible,
),
"overflow-x": (
property: overflow-x,
values: auto hidden
),
"overflow-y": (
property: overflow-y,
values: auto hidden
),
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: none inline inline-block block table table-row table-cell flex inline-flex
),
"float": (
responsive: true,
print: true,
property: float,
class: float,
values: none left right
),
"float:rtl": (
responsive: true,
print: true,
property: float,
class: float,
values: (
end: left,
start: right,
)
),
"float:ltr": (
responsive: true,
print: true,
property: float,
class: float,
values: (
end: right,
start: left,
)
),
// Flex utilities
"flex": (
responsive: true,
property: flex,
values: (
fill: 1 1 auto,
'1-1': 1 1 auto,
'1-0': 1 0 auto,
'0-1': 0 1 auto,
'0-0': 0 0 auto,
'1-1-100': 1 1 100%,
'1-0-100': 1 0 100%,
'0-1-100': 0 1 100%,
'0-0-100': 0 0 100%
)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"justify-content": (
responsive: true,
property: justify-content,
class: justify,
values: (
start: flex-start,
end: flex-end,
center: center,
space-between: space-between,
space-around: space-around,
space-evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
class: align,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
space-between: space-between,
space-around: space-around,
space-evenly: space-evenly,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6,
7: 7,
8: 8,
9: 9,
10: 10,
11: 11,
12: 12,
last: 13,
),
),
// gap utilities
"gap": (
responsive: true,
property: gap,
class: ga,
values: map.merge(variables.$spacers, (auto: auto))
),
"gap-row": (
responsive: true,
property: row-gap,
class: gr,
values: map.merge(variables.$spacers, (auto: auto))
),
"gap-column": (
responsive: true,
property: column-gap,
class: gc,
values: map.merge(variables.$spacers, (auto: auto))
),
// Margin utilities
"margin": (
responsive: true,
property: margin,
class: ma,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-right": (
responsive: true,
property: margin-right,
class: mr,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-left": (
responsive: true,
property: margin-left,
class: ml,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-inline-start,
class: ms,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-inline-end,
class: me,
values: map.merge(variables.$spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: ma,
values: variables.$negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: variables.$negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: variables.$negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: variables.$negative-spacers
),
"negative-margin-right": (
responsive: true,
property: margin-right,
class: mr,
values: variables.$negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: variables.$negative-spacers
),
"negative-margin-left": (
responsive: true,
property: margin-left,
class: ml,
values: variables.$negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-inline-start,
class: ms,
values: variables.$negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-inline-end,
class: me,
values: variables.$negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: pa,
values: variables.$spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: variables.$spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: variables.$spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: variables.$spacers
),
"padding-right": (
responsive: true,
property: padding-right,
class: pr,
values: variables.$spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: variables.$spacers
),
"padding-left": (
responsive: true,
property: padding-left,
class: pl,
values: variables.$spacers
),
"padding-start": (
responsive: true,
property: padding-inline-start,
class: ps,
values: variables.$spacers
),
"padding-end": (
responsive: true,
property: padding-inline-end,
class: pe,
values: variables.$spacers
),
// Border radius
"rounded": (
property: border-radius,
class: rounded,
values: variables.$rounded
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-t,
values: variables.$rounded
),
"rounded-end": (
property: (ltr: border-top-right-radius border-bottom-right-radius, rtl: border-top-left-radius border-bottom-left-radius),
class: rounded-e,
values: variables.$rounded
),
"rounded-bottom": (
property: border-bottom-left-radius border-bottom-right-radius,
class: rounded-b,
values: variables.$rounded
),
"rounded-start": (
property: (ltr: border-top-left-radius border-bottom-left-radius, rtl: border-top-right-radius border-bottom-right-radius),
class: rounded-s,
values: variables.$rounded
),
"rounded-top-start": (
property: (ltr: border-top-left-radius, rtl: border-top-right-radius),
class: rounded-ts,
values: variables.$rounded
),
"rounded-top-end": (
property: (ltr: border-top-right-radius, rtl: border-top-left-radius),
class: rounded-te,
values: variables.$rounded
),
"rounded-bottom-end": (
property: (ltr: border-bottom-right-radius, rtl: border-bottom-left-radius),
class: rounded-be,
values: variables.$rounded
),
"rounded-bottom-start": (
property: (ltr: border-bottom-left-radius, rtl: border-bottom-right-radius),
class: rounded-bs,
values: variables.$rounded
),
// Border
"border": (
property: border-width border-style border-color,
class: border,
values: variables.$borders
),
"border-opacity": (
property: --v-border-opacity,
class: border-opacity,
values: variables.$border-opacities
),
"border-top": (
property: border-block-start-width border-block-start-style border-block-start-color,
class: border-t,
values: variables.$borders
),
"border-end": (
property: border-inline-end-width border-inline-end-style border-inline-end-color,
class: border-e,
values: variables.$borders
),
"border-bottom": (
property: border-block-end-width border-block-end-style border-block-end-color,
class: border-b,
values: variables.$borders
),
"border-start": (
property: border-inline-start-width border-inline-start-style border-inline-start-color,
class: border-s,
values: variables.$borders
),
"border-style": (
property: border-style,
class: border,
values: solid dashed dotted double none
),
// Text
"text-align": (
responsive: true,
property: text-align,
class: text,
values: left right center justify start end
),
"text-decoration": (
property: text-decoration,
class: text-decoration,
values: line-through none overline underline
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
no-wrap: nowrap,
pre: pre,
pre-line: pre-line,
pre-wrap: pre-wrap,
)
),
"overflow-wrap": (
property: overflow-wrap word-break, // word-break for IE & < Edge 18
class: text,
values: (break: break-word)
),
"text-opacity": (
property: color,
class: text,
values: (
high-emphasis: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)),
medium-emphasis: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)),
disabled: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)),
)
),
"text-overflow": (
property: white-space overflow text-overflow,
class: text,
values: (truncate: nowrap hidden ellipsis)
),
"typography": (
responsive: true,
property: (
font-size,
font-weight,
line-height,
letter-spacing,
font-family,
text-transform
),
class: text,
unimportant: (
font-family,
font-weight,
line-height
),
values: variables.$flat-typography
),
"text-transform": (
property: text-transform,
class: text,
values: none capitalize lowercase uppercase
),
"font-weight": (
property: font-weight,
class: font-weight,
values: variables.$font-weights
),
"font-italic": (
property: font-style,
class: font,
values: italic
),
"text-mono": (
property: font-family,
class: text,
values: (
mono: monospace
)
),
// Position
"position": (
property: position,
class: position,
values: static relative fixed absolute sticky
),
// Cursor
"cursor": (
property: cursor,
class: cursor,
values: auto default pointer wait text move help not-allowed progress grab grabbing none
),
// Sizing
"fill-height": (
property: height,
class: fill,
values: (
height: 100%
)
),
"height": (
property: height,
class: h,
values: (
auto: auto,
screen: 100vh,
0: 0,
25: 25%,
50: 50%,
75: 75%,
100: 100%
)
),
"height-screen": (
property: height,
class: h,
values: (
screen: 100dvh
)
),
"width": (
property: width,
class: w,
values: (
auto: auto,
0: 0,
25: 25%,
33: 33%,
50: 50%,
66: 66%,
75: 75%,
100: 100%
)
)
),
$utilities
);
} @else {
$utilities: ();
}

View File

@ -0,0 +1,327 @@
@use 'sass:math';
@use 'sass:map';
@use 'sass:meta';
@use '../tools/functions' as *;
$color-pack: true !default;
$reset: true !default;
$body-font-family: 'Roboto', sans-serif !default;
$font-size-root: 1rem !default;
$line-height-root: 1.5 !default;
$border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
$border-radius-root: 4px !default;
$border-style-root: solid !default;
$borders: () !default;
$borders: map-deep-merge(
(
0: 0,
null: thin,
sm: 1px,
md: 2px,
lg: 4px,
xl: 8px
),
$borders
);
@each $key, $border in $borders {
$borders: map-deep-merge(
$borders,
( $key: $border $border-style-root $border-color-root )
)
}
$border-opacities: () !default;
$border-opacities: map-deep-merge(
(
0: 0,
null: .12,
25: .25,
50: .50,
75: .75,
100: 1
),
$border-opacities
);
$states: () !default;
$states: map-deep-merge(
(
'hover': var(--v-hover-opacity),
'focus': var(--v-focus-opacity),
'selected': var(--v-selected-opacity),
'activated': var(--v-activated-opacity),
'pressed': var(--v-pressed-opacity),
'dragged': var(--v-dragged-opacity)
),
$states
);
$rounded: () !default;
$rounded: map-deep-merge(
(
0: 0,
'sm': $border-radius-root * .5,
null: $border-radius-root,
'lg': $border-radius-root * 2,
'xl': $border-radius-root * 6,
'pill': 9999px,
'circle': 50%,
'shaped': $border-radius-root * 6 0
),
$rounded
);
$spacer: 4px !default;
$spacers-steps: 16 !default;
$spacers: () !default;
@if (meta.type-of($spacers) == list) {
@for $i from 0 through $spacers-steps {
$spacers: map.merge($spacers, ($i: $spacer * $i))
}
}
$negative-spacers: () !default;
@if (meta.type-of($negative-spacers) == list) {
@for $i from 1 through $spacers-steps {
$negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i))
}
}
$grid-breakpoints: () !default;
$grid-breakpoints: map-deep-merge(
(
'xs': 0,
'sm': 600px,
'md': 960px,
'lg': 1280px,
'xl': 1920px,
'xxl': 2560px,
),
$grid-breakpoints
);
$grid-gutter: $spacer * 6 !default;
$form-grid-gutter: $spacer * 2 !default;
$grid-columns: 12 !default;
$container-padding-x: $spacer * 4 !default;
$grid-gutters: () !default;
$grid-gutters: map-deep-merge(
(
'xs': math.div($grid-gutter, 12),
'sm': math.div($grid-gutter, 6),
'md': math.div($grid-gutter, 3),
'lg': math.div($grid-gutter * 2, 3),
'xl': $grid-gutter,
),
$grid-gutters
);
$container-max-widths: () !default;
$container-max-widths: map-deep-merge(
(
'xs': null,
'sm': null,
'md': map.get($grid-breakpoints, 'md') * 0.9375,
'lg': map.get($grid-breakpoints, 'lg') * 0.9375,
'xl': map.get($grid-breakpoints, 'xl') * 0.9375,
'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375,
),
$container-max-widths
);
// Avoid using *-and-down where possible
$display-breakpoints: () !default;
$display-breakpoints: map-deep-merge(
(
'print-only': 'only print',
'screen-only': 'only screen',
'xs': '(max-width: #{map.get($grid-breakpoints, 'sm') - 0.02})',
'sm': '(min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
'md': '(min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
'lg': '(min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
'xl': '(min-width: #{map.get($grid-breakpoints, 'xl')}) and (max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
'xxl': '(min-width: #{map.get($grid-breakpoints, 'xxl')})',
'sm-and-up': '(min-width: #{map.get($grid-breakpoints, 'sm')})',
'md-and-up': '(min-width: #{map.get($grid-breakpoints, 'md')})',
'lg-and-up': '(min-width: #{map.get($grid-breakpoints, 'lg')})',
'xl-and-up': '(min-width: #{map.get($grid-breakpoints, 'xl')})',
'sm-and-down': '(max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
'md-and-down': '(max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
'lg-and-down': '(max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
'xl-and-down': '(max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
),
$display-breakpoints
);
$font-weights: () !default;
$font-weights: map-deep-merge(
(
'thin': 100,
'light': 300,
'regular': 400,
'medium': 500,
'bold': 700,
'black': 900
),
$font-weights
);
$heading-font-family: $body-font-family !default;
$typography: () !default;
$typography: map-deep-merge(
(
'h1': (
'size': 6rem,
'weight': 300,
'line-height': 6rem,
'letter-spacing': -.015625em,
'font-family': $heading-font-family,
'text-transform': none
),
'h2': (
'size': 3.75rem,
'weight': 300,
'line-height': 3.75rem,
'letter-spacing': -.0083333333em,
'font-family': $heading-font-family,
'text-transform': none
),
'h3': (
'size': 3rem,
'weight': 400,
'line-height': 3.125rem,
'letter-spacing': normal,
'font-family': $heading-font-family,
'text-transform': none
),
'h4': (
'size': 2.125rem,
'weight': 400,
'line-height': 2.5rem,
'letter-spacing': .0073529412em,
'font-family': $heading-font-family,
'text-transform': none
),
'h5': (
'size': 1.5rem,
'weight': 400,
'line-height': 2rem,
'letter-spacing': normal,
'font-family': $heading-font-family,
'text-transform': none
),
'h6': (
'size': 1.25rem,
'weight': 500,
'line-height': 2rem,
'letter-spacing': .0125em,
'font-family': $heading-font-family,
'text-transform': none
),
'subtitle-1': (
'size': 1rem,
'weight': normal,
'line-height': 1.75rem,
'letter-spacing': .009375em,
'font-family': $body-font-family,
'text-transform': none
),
'subtitle-2': (
'size': .875rem,
'weight': 500,
'line-height': 1.375rem,
'letter-spacing': .0071428571em,
'font-family': $body-font-family,
'text-transform': none
),
'body-1': (
'size': 1rem,
'weight': 400,
'line-height': 1.5rem,
'letter-spacing': .03125em,
'font-family': $body-font-family,
'text-transform': none
),
'body-2': (
'size': .875rem,
'weight': 400,
'line-height': 1.25rem,
'letter-spacing': .0178571429em,
'font-family': $body-font-family,
'text-transform': none
),
'button': (
'size': .875rem,
'weight': 500,
'line-height': 2.25rem,
'letter-spacing': .0892857143em,
'font-family': $body-font-family,
'text-transform': uppercase
),
'caption': (
'size': .75rem,
'weight': 400,
'line-height': 1.25rem,
'letter-spacing': .0333333333em,
'font-family': $body-font-family,
'text-transform': none
),
'overline': (
'size': .75rem,
'weight': 500,
'line-height': 2rem,
'letter-spacing': .1666666667em,
'font-family': $body-font-family,
'text-transform': uppercase
)
),
$typography
);
$flat-typography: () !default;
@each $type, $values in $typography {
$flat-typography: map-deep-merge(
$flat-typography,
(#{$type}: map.values($values))
);
}
// Mapping from transition to easings:
// fast-out-slow-in -> standard
// linear-out-slow-in -> decelerated
// fast-out-linear-in -> accelerated
// ease-in-out -> standard or accelerated depending on usage
// fast-in-fast-out -> accelerated
// swing -> standard
$standard-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
$decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering
$accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving
// Elements
$bootable-transition: 0.2s $decelerated-easing !default;
$blockquote-font-size: 18px !default;
$blockquote-font-weight: 300 !default;
$sizes: (
'x-small',
'small',
'default',
'large',
'x-large'
) !default;
$size-scale: $spacer * 2 !default;
$size-scales: (
'x-small': -2,
'small': -1,
'default': 0,
'large': 1,
'x-large': 2
) !default;