root

root設定

詳しい導入事例は導入方法を参照してください。

+-contrast-+が付く名称はダークモードの時などに使用。

+-breakpoint-+はJSで使用。

  • CSS
:root {
  --white:       rgb(255 255 255);
  --white-main:  rgb(255 255 255 / .95);
  --white-light: rgb(255 255 255 / .87);

  --black:       rgb(0 0 0);
  --black-main:  rgb(0 0 0 / .95);
  --black-light: rgb(0 0 0 / .87);

  --primary-main:  #2194f3;
  --primary-light: #bbdefb;
  --primary-dark:  #1045a1;
  --primary-50:  #e3f2fd;
  --primary-100: #bbdefb;
  --primary-200: #90c9f9;
  --primary-300: #63b4f6;
  --primary-400: #42a4f5;
  --primary-500: #2194f3;
  --primary-600: #1f87e5;
  --primary-700: #1a75d2;
  --primary-800: #1764c0;
  --primary-900: #1045a1;

  --secondary-main:  #ffeb3b;
  --secondary-light: #fff9c4;
  --secondary-dark:  #f57f16;
  --secondary-50:  #fffde7;
  --secondary-100: #fff9c4;
  --secondary-200: #fff59d;
  --secondary-300: #fef075;
  --secondary-400: #fceb55;
  --secondary-500: #ffeb3b;
  --secondary-600: #fdd835;
  --secondary-700: #fbc02d;
  --secondary-800: #f9a825;
  --secondary-900: #f57f16;

  --txt-main:     rgb(0 0 0 / .87);
  --txt-light:    rgb(0 0 0 / .60);
  --txt-disabled: rgb(0 0 0 / .28);
  --txt-link:     rgb(41 98 255);

  --txt-contrast-main:  rgb(255 255 255 / .60);
  --txt-contrast-light: rgb(255 255 255 / .87);
  --txt-contrast-dark:  rgb(255 255 255 / .28);
  --txt-contrast-link:  rgb(62, 166, 255);

  --bg-main:     rgb(246 247 248);
  --bg-paper:    rgb(255 255 255);
  --bg-disabled: rgb(0 0 0 / .12);

  --bg-contrast-main:  rgb(0 0 0 / .60);
  --bg-contrast-light: rgb(0 0 0 / .87);
  --bg-contrast-dark:  rgb(0 0 0 / .28);

  --line-main:  rgb(0 0 0 / .23);
  --line-light: rgb(0 0 0 / .12);
  --line-dark:  rgb(0 0 0 / .42);

  --hover:       rgb(0 0 0 / .04);
  --overlay:     rgb(0 0 0 / .50);
  --shadow-main: rgb(0 0 0 / .2) 0px 3px 1px -2px, rgb(0 0 0 / .14) 0px 2px 2px 0px, rgb(0 0 0 / .12) 0px 1px 5px 0px;
  --shadow-main-hov: rgb(0 0 0 / .2) 0px 2px 4px -1px, rgb(0 0 0 / .14) 0px 4px 5px 0px, rgb(0 0 0 / .12) 0px 1px 10px 0px;
  --shadow-light: 0 1px 15px rgb(27 31 35 / .15),0 0 1px rgba(106 115 125 / .35);
  --shadow-light-hov: 0 1px 13px rgb(27 31 35 / .2),0 0 5px rgba(106 115 125 / .4);

  --margin-obj:     8px;
  --margin-item:    16px;
  --margin-group:   24px;
  --margin-unit:    32px;
  --margin-block:   40px;
  --margin-section: 64px;

  --radius-xs: 4px;
  --radius-xm: 10px;
  --radius-xl: 20px;
  --radius-round: 100vh;
  --radius-circle: 50%;

  --breakpoint-xl: 1280px;
  --breakpoint-xm: 960px;
  --breakpoint-xs: 770px;

  --typo-h1:  2rem;      /*32px*/
  --typo-h2:  1.875rem;  /*30px*/
  --typo-h3:  1.625rem;  /*26px*/
  --typo-h4:  1.5rem;    /*24px*/
  --typo-h5:  1.375rem;  /*22px*/
  --typo-h6:  1.25rem ;  /*20px*/
  --typo-art: 1.125rem;  /*18px*/
  --typo-bd:  1rem;      /*16px*/
  --typo-min: .875rem;   /*14px*/

  --info-main:     #2196F3;
  --info-light:    #64b5f6;
  --info-dark:     #0d47a1;
  --info-contrast: #0d3c61;
  --info-bg:       #e3f2fd;
  
  --success-main:     #4caf50;
  --success-light:    #81c784;
  --success-dark:     #1b5e20;
  --success-contrast: #1e4620;
  --success-bg:       #e8f5e9;
  
  --important-main:     #9c27b0;
  --important-light:    #ba68c8;
  --important-dark:     #4a148c;
  --important-contrast: #3e1046;
  --important-bg:       #f3e5f5;
  
  --warning-main:     #ff9800;
  --warning-light:    #ffb74d;
  --warning-dark:     #e65100;
  --warning-contrast: #5f2b01;
  --warning-bg:       #fff3e0;

  --error-main:     #F44336;
  --error-light:    #e57373;
  --error-dark:     #b71c1c;
  --error-contrast: #621b16;
  --error-bg:       #ffebee;
}