routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+850
@@ -0,0 +1,850 @@
|
||||
@use 'sass:map';
|
||||
@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
|
||||
);
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
@use '../tools/functions' as *;
|
||||
|
||||
$shadow-key-color: rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)) !default;
|
||||
$shadow-ambient-color: rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)) !default;
|
||||
|
||||
$shadow-key: () !default;
|
||||
$shadow-key: map-deep-merge(
|
||||
(
|
||||
0: (0px 0px 0px 0px $shadow-key-color),
|
||||
1: (0px 1px 2px 0px $shadow-key-color),
|
||||
2: (0px 1px 2px 0px $shadow-key-color),
|
||||
3: (0px 1px 3px 0px $shadow-key-color),
|
||||
4: (0px 2px 3px 0px $shadow-key-color),
|
||||
5: (0px 4px 4px 0px $shadow-key-color)
|
||||
),
|
||||
$shadow-key
|
||||
);
|
||||
|
||||
$shadow-ambient: () !default;
|
||||
$shadow-ambient: map-deep-merge(
|
||||
(
|
||||
0: (0px 0px 0px 0px $shadow-ambient-color),
|
||||
1: (0px 1px 3px 1px $shadow-ambient-color),
|
||||
2: (0px 2px 6px 2px $shadow-ambient-color),
|
||||
3: (0px 4px 8px 3px $shadow-ambient-color),
|
||||
4: (0px 6px 10px 4px $shadow-ambient-color),
|
||||
5: (0px 8px 12px 6px $shadow-ambient-color)
|
||||
),
|
||||
$shadow-ambient
|
||||
);
|
||||
|
||||
$elevation-overlay-step: 2%;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
@forward './variables'
|
||||
@forward './colors'
|
||||
@forward './elevations'
|
||||
@forward './utilities'
|
||||
+628
@@ -0,0 +1,628 @@
|
||||
@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 scroll,
|
||||
),
|
||||
"overflow-x": (
|
||||
property: overflow-x,
|
||||
values: auto hidden scroll
|
||||
),
|
||||
"overflow-y": (
|
||||
property: overflow-y,
|
||||
values: auto hidden scroll
|
||||
),
|
||||
"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%,
|
||||
'1-1-0': 1 1 0,
|
||||
'1-0-0': 1 0 0,
|
||||
'0-1-0': 0 1 0,
|
||||
'0-0-0': 0 0 0,
|
||||
)
|
||||
),
|
||||
"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,
|
||||
)
|
||||
),
|
||||
"justify-items": (
|
||||
responsive: true,
|
||||
property: justify-items,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
stretch: stretch,
|
||||
)
|
||||
),
|
||||
"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-current": (
|
||||
property: border-color,
|
||||
class: border,
|
||||
values: (current: currentColor)
|
||||
),
|
||||
"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)
|
||||
),
|
||||
"opacity": (
|
||||
property: opacity,
|
||||
class: opacity,
|
||||
values: variables.$opacities
|
||||
),
|
||||
"text-opacity": (
|
||||
property: color,
|
||||
class: text,
|
||||
values: (
|
||||
high-emphasis: theme-color('on-background', var(--v-high-emphasis-opacity)),
|
||||
medium-emphasis: theme-color('on-background', var(--v-medium-emphasis-opacity)),
|
||||
disabled: theme-color('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,
|
||||
),
|
||||
class: text,
|
||||
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
|
||||
),
|
||||
"top": (
|
||||
property: top,
|
||||
class: top,
|
||||
values: 0
|
||||
),
|
||||
"right": (
|
||||
property: right,
|
||||
class: right,
|
||||
values: 0
|
||||
),
|
||||
"bottom": (
|
||||
property: bottom,
|
||||
class: bottom,
|
||||
values: 0
|
||||
),
|
||||
"left": (
|
||||
property: left,
|
||||
class: left,
|
||||
values: 0
|
||||
),
|
||||
// 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,
|
||||
responsive: true,
|
||||
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,
|
||||
responsive: true,
|
||||
class: w,
|
||||
values: (
|
||||
auto: auto,
|
||||
0: 0,
|
||||
25: 25%,
|
||||
33: 33%,
|
||||
50: 50%,
|
||||
66: 66%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
)
|
||||
)
|
||||
),
|
||||
$utilities
|
||||
);
|
||||
} @else {
|
||||
$utilities: ();
|
||||
}
|
||||
+362
@@ -0,0 +1,362 @@
|
||||
@use 'sass:math';
|
||||
@use 'sass:map';
|
||||
@use 'sass:meta';
|
||||
@use '../tools/functions' as *;
|
||||
|
||||
$color-pack: true !default;
|
||||
$reset: true !default;
|
||||
|
||||
$misc: () !default;
|
||||
$misc: map-deep-merge(
|
||||
(
|
||||
elevation: true,
|
||||
hidden: true,
|
||||
'sr-only': true,
|
||||
'pointer-events': true,
|
||||
),
|
||||
$misc
|
||||
);
|
||||
|
||||
$body-font-family: var(--v-font-body, '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;
|
||||
$border-width-root: thin !default;
|
||||
$transition-duration-root: 0.3s !default;
|
||||
$transition-move-duration-root: 0.5s !default;
|
||||
|
||||
$borders: () !default;
|
||||
$borders: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
null: $border-width-root,
|
||||
thin: $border-width-root,
|
||||
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
|
||||
);
|
||||
|
||||
$opacities: () !default;
|
||||
$opacities: 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),
|
||||
0: 0,
|
||||
10: .1,
|
||||
20: .2,
|
||||
30: .3,
|
||||
40: .4,
|
||||
50: .5,
|
||||
60: .6,
|
||||
70: .7,
|
||||
80: .8,
|
||||
90: .9,
|
||||
100: 1
|
||||
),
|
||||
$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,
|
||||
'md': $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': 840px,
|
||||
'lg': 1145px,
|
||||
'xl': 1545px,
|
||||
'xxl': 2138px,
|
||||
),
|
||||
$grid-breakpoints
|
||||
);
|
||||
|
||||
$grid-gutter: $spacer * 6 !default;
|
||||
$grid-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
|
||||
$grid-columns: 12 !default;
|
||||
$container-padding-x: $spacer * 4 !default;
|
||||
|
||||
$container-max-widths: () !default;
|
||||
$container-max-widths: map-deep-merge(
|
||||
(
|
||||
'xs': null,
|
||||
'sm': null,
|
||||
'md': 100 * math.floor(map.get($grid-breakpoints, 'md') * 0.009375),
|
||||
'lg': 100 * math.floor(map.get($grid-breakpoints, 'lg') * 0.009375),
|
||||
'xl': 100 * math.floor(map.get($grid-breakpoints, 'xl') * 0.009375),
|
||||
'xxl': 100 * math.floor(map.get($grid-breakpoints, 'xxl') * 0.009375),
|
||||
),
|
||||
$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,
|
||||
'semibold': 600,
|
||||
'bold': 700,
|
||||
'black': 900
|
||||
),
|
||||
$font-weights
|
||||
);
|
||||
|
||||
$heading-font-family: var(--v-font-heading, #{$body-font-family}) !default;
|
||||
|
||||
$typography: () !default;
|
||||
$typography: map-deep-merge(
|
||||
(
|
||||
'display-large': (
|
||||
'size': 3.5625rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.1228070175,
|
||||
'letter-spacing': -.0043859649em,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'display-medium': (
|
||||
'size': 2.8125rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.1555555556,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'display-small': (
|
||||
'size': 2.25rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.2222222222,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'headline-large': (
|
||||
'size': 2rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.25,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'headline-medium': (
|
||||
'size': 1.75rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.2857142857,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'headline-small': (
|
||||
'size': 1.5rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.3333333333,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'title-large': (
|
||||
'size': 1.375rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.2727272727,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'title-medium': (
|
||||
'size': 1rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.5,
|
||||
'letter-spacing': .009375em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'title-small': (
|
||||
'size': .875rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.4285714286,
|
||||
'letter-spacing': .0071428571em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'body-large': (
|
||||
'size': 1rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.5,
|
||||
'letter-spacing': .03125em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'body-medium': (
|
||||
'size': .875rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.4285714286,
|
||||
'letter-spacing': .0178571429em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'body-small': (
|
||||
'size': .75rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.3333333333,
|
||||
'letter-spacing': .0333333333em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'label-large': (
|
||||
'size': .875rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.4285714286,
|
||||
'letter-spacing': .0071428571em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'label-medium': (
|
||||
'size': .75rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.3333333333,
|
||||
'letter-spacing': .0416666667em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'label-small': (
|
||||
'size': .6875rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.4545454545,
|
||||
'letter-spacing': .0454545455em,
|
||||
'font-family': $body-font-family
|
||||
)
|
||||
),
|
||||
$typography
|
||||
);
|
||||
|
||||
$flat-typography: () !default;
|
||||
@each $type, $values in $typography {
|
||||
$flat-typography: map-deep-merge(
|
||||
$flat-typography,
|
||||
(#{$type}: (
|
||||
map.get($values, 'size'),
|
||||
map.get($values, 'weight'),
|
||||
map.get($values, 'line-height'),
|
||||
map.get($values, 'letter-spacing'),
|
||||
map.get($values, 'font-family')
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
// 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
|
||||
$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;
|
||||
Reference in New Issue
Block a user