diff --git a/Gruntfile.js b/Gruntfile.js index 3a3244f..591de7a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,7 +4,7 @@ module.exports = function (grunt) { config.pkg = grunt.file.readJSON('package.json'); config.watch = { - files: ['styles/mixins/**/*.less', 'styles/variables/**/*.less', 'icons/dashboard/**/*.svg', 'icons/player/**/*.svg'], + files: ['styles/mixins/**/*.less', 'styles/**/*.less', 'icons/dashboard/**/*.svg', 'icons/player/**/*.svg'], tasks: ['default'] }; diff --git a/icons/dashboard/copy.svg b/icons/dashboard/copy.svg new file mode 100644 index 0000000..f834070 --- /dev/null +++ b/icons/dashboard/copy.svg @@ -0,0 +1 @@ + diff --git a/icons/sprites/icons-dashboard.svg b/icons/sprites/icons-dashboard.svg index 8894ee1..9cc8724 100644 --- a/icons/sprites/icons-dashboard.svg +++ b/icons/sprites/icons-dashboard.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/styles/components/icons.less b/styles/components/icons.less index c5d24a7..28df026 100644 --- a/styles/components/icons.less +++ b/styles/components/icons.less @@ -1,9 +1,12 @@ .ds-icon { .ds-square(16px); vertical-align: middle; - &.ds-icon-xs { + &.ds-icon-xxs { .ds-square(8px); } + &.ds-icon-xs { + .ds-square(12px); + } &.ds-icon-sm { .ds-square(16px); } @@ -23,4 +26,4 @@ width: 24px; height: 25px; } -} \ No newline at end of file +} diff --git a/styles/hook.css b/styles/hook.css index df36379..513502c 100644 --- a/styles/hook.css +++ b/styles/hook.css @@ -2,11 +2,7 @@ /* Sizes */ /* Weights - Custom */ /* Weights - Data */ -/* Basics */ /* Primary Colors */ -/* Hover for Primary Colors */ -/* Secondary Colors */ -/* Blends */ /* Data Color Patterns /* Palette A */ @@ -29,10 +25,14 @@ height: 16px; vertical-align: middle; } -.ds-icon.ds-icon-xs { +.ds-icon.ds-icon-xxs { width: 8px; height: 8px; } +.ds-icon.ds-icon-xs { + width: 12px; + height: 12px; +} .ds-icon.ds-icon-sm { width: 16px; height: 16px; diff --git a/styles/hook.min.css b/styles/hook.min.css index 2483a11..d3f2907 100644 --- a/styles/hook.min.css +++ b/styles/hook.min.css @@ -1 +1 @@ -.ds-icon{width:16px;height:16px;vertical-align:middle}.ds-icon.ds-icon-xs{width:8px;height:8px}.ds-icon.ds-icon-sm{width:16px;height:16px}.ds-icon.ds-icon-med{width:24px;height:24px}.ds-icon.ds-icon-lg{width:32px;height:32px}.ds-logo-full{width:104px;height:38px}.ds-logo-mark{width:24px;height:25px} \ No newline at end of file +.ds-icon{width:16px;height:16px;vertical-align:middle}.ds-icon.ds-icon-xxs{width:8px;height:8px}.ds-icon.ds-icon-xs{width:12px;height:12px}.ds-icon.ds-icon-sm{width:16px;height:16px}.ds-icon.ds-icon-med{width:24px;height:24px}.ds-icon.ds-icon-lg{width:32px;height:32px}.ds-logo-full{width:104px;height:38px}.ds-logo-mark{width:24px;height:25px} \ No newline at end of file diff --git a/styles/variables/brand-colors.less b/styles/variables/brand-colors.less index 6211ae6..2441fbe 100644 --- a/styles/variables/brand-colors.less +++ b/styles/variables/brand-colors.less @@ -1,34 +1,28 @@ -/* Basics */ -@ds-black: #000000; -@ds-white: #FFFFFF; - /* Primary Colors */ -@ds-charcoal: #252525; -@ds-red: #FF0046; -@ds-blue: #0B7EF4; -@ds-midnight: #475470; -@ds-slate: #AAB4C8; -@ds-gray: #D9DDE6; -@ds-light-gray: #ECEEF2; +@ds-dahlia: #EC0041; +@ds-dahlia-fade: mix(@ds-dahlia, @ds-white, 20%); +@ds-dahlia-dark-1: mix(@ds-dahlia, @ds-black, 80%); +@ds-dahlia-dark-2: mix(@ds-dahlia, @ds-black, 70%); -/* Hover for Primary Colors */ -@ds-blue-hover: darken(@ds-blue, 8%); -@ds-red-hover: darken(@ds-red, 8%); -@ds-slate-hover: darken(@ds-slate, 8%); +@ds-fog: #D8DDE6; +@ds-fog-fade: mix(@ds-fog, @ds-white, 30%); +@ds-fog-dark-1: darken(@ds-fog, 18%); +@ds-fog-dark-2: darken(@ds-fog, 26%); -/* Secondary Colors */ -@ds-pink: #FF4664; -@ds-teal: #2BBECF; -@ds-violet: #9000BE; -@ds-purple: #7864FF; -@ds-gold: #FF9400; -@ds-sun: #FFD700; -@ds-grassgreen: #00C669; -@ds-springgreen: #00F096; +@ds-midnight: #475470; +@ds-midnight-fade: mix(@ds-midnight, @ds-white, 20%); +@ds-midnight-dark-1: mix(@ds-midnight, @ds-black, 80%); +@ds-midnight-dark-2: mix(@ds-midnight, @ds-black, 70%); + +@ds-abyss: #2F3542; +@ds-abyss-fade: mix(@ds-abyss, @ds-white, 20%); +@ds-abyss-dark-1: mix(@ds-abyss, @ds-black, 80%); +@ds-abyss-dark-2: mix(@ds-abyss, @ds-black, 70%); -/* Blends */ -@ds-midnight-charcoal: mix(@ds-charcoal, @ds-midnight); // #363D4B; -@ds-slate-gray: mix(@ds-slate, @ds-gray); // #C2C9D7; -@ds-midnight-gray: mix(@ds-midnight, @ds-gray); // #9099AB; -@ds-midnight-slate: mix(@ds-midnight, @ds-slate); // #79849C; -@ds-blue-white: mix(@ds-blue, @ds-white, 5%); // #E6EFF9; +// Supportive System Colors +@ds-black: #000000; +@ds-white: #FFFFFF; +@ds-blue: #0A75E3; +@ds-red: #FF0000; // destructive - high risk +@ds-orange: #FFBA43; // medium risk +@ds-green: #0AAC29; // affirmative diff --git a/styles/variables/code-snippet-colors.less b/styles/variables/code-snippet-colors.less index 18f9d53..4cde36f 100644 --- a/styles/variables/code-snippet-colors.less +++ b/styles/variables/code-snippet-colors.less @@ -1,8 +1,10 @@ -@ds-code-background: @ds-midnight-charcoal; +@ds-code-background: @ds-abyss; @ds-code-text: @ds-white; -@ds-code-pink: mix(@ds-pink, #fff, 80%); -@ds-code-gold: mix(@ds-gold, #fff, 70%); -@ds-code-teal: #66d9ef; +@ds-code-green: #98c379; +@ds-code-purple: #c678dd; +@ds-code-blue: #61afef; +@ds-code-pink: #e06c75; +@ds-code-orange: #d19a66; -@ds-inline-code-background: @ds-light-gray; -@ds-inline-code-text: @ds-charcoal; +@ds-inline-code-background: @ds-fog; +@ds-inline-code-text: @ds-abyss;