@ringcentral/juno 1.12.7-beta.5936-eb8c40c5 → 2.0.2

package/scss/_rcHighContrast.scss

@@ -1,198 +0,0 @@
-$rc-rcHighContrast-variable: (
-  palette: (
-    action: (
-      grayDark: #FFFFFF,
-      grayLight: #FFFFFF,
-      primary: #35C6FF
-    ),
-    avatar: (
-      ash: #FFFFFF,
-      blueberry: #AE9CFF,
-      brass: #EBA800,
-      global: #84CCFF,
-      gold: #FEFF05,
-      lake: #12F7FF,
-      oasis: #00C5BE,
-      pear: #7FFF5D,
-      persimmon: #FF833B,
-      sage: #42FFA0,
-      tomato: #FF827A
-    ),
-    content: (
-      brand: #35C6FF
-    ),
-    danger: (
-      b01: #391D19,
-      b02: #49241F,
-      b03: #FF827A,
-      b04: #FF827A,
-      f01: #49241F,
-      f02: #FF827A,
-      f11: #FF827A
-    ),
-    dialHeader: (
-      avatarBg: #84CCFF,
-      avatarIcon: #FFFFFF,
-      bg: #000000,
-      focusBorder: #35C6FF,
-      icon: #FFFFFF,
-      text: #FFFFFF,
-      textHint: #FFFFFF
-    ),
-    disabled: (
-      b01: #4D4D4D,
-      f01: #000000,
-      f02: #4D4D4D
-    ),
-    error: (
-      main: #DD6057
-    ),
-    header: (
-      bgLeft: #000000,
-      bgOverlay: rgba(255,255,255,0.16),
-      bgOverlayDisabled: rgba(255,255,255,0.08),
-      bgRight: #000000,
-      border: #FFFFFF,
-      divider: #FFFFFF,
-      fabBg: #000000,
-      fabIcon: #FFFFFF,
-      focusBorder: #FFFFFF,
-      icon: #FFFFFF,
-      iconDisabled: rgba(255,255,255,0.32),
-      text: #FFFFFF,
-      textHint: #FFFFFF
-    ),
-    highContrast: #FFFFFF,
-    highlight: (
-      b01: #FFFFFF,
-      b02: #3E2A19,
-      b03: #884C12,
-      f01: #FFA43B,
-      f02: #FFA43B
-    ),
-    info: (
-      main: #FFFFFF
-    ),
-    informative: (
-      b01: #000000,
-      f01: #222E49,
-      f02: #35C6FF
-    ),
-    interactive: (
-      b01: #29334C,
-      b02: #35C6FF,
-      f01: #35C6FF
-    ),
-    label: (
-      black02: #FFFFFF,
-      blue01: #35C6FF,
-      blue02: #35C6FF,
-      green01: #7FFF5D,
-      green02: #7FFF5D,
-      orange01: #FFA43B,
-      orange02: #FFA43B,
-      purple01: #AE9CFF,
-      purple02: #AE9CFF,
-      red01: #FF827A,
-      red02: #FF827A,
-      teal01: #12F7FF,
-      teal02: #12F7FF,
-      yellow01: #FEFF05,
-      yellow02: #FEFF05
-    ),
-    nav: (
-      b01: #000000,
-      b02: #000000,
-      bookmark: #35C6FF,
-      ctlDefault: #FFFFFF,
-      ctlSelected: #35C6FF,
-      f01: #FFFFFF,
-      f02: #FFFFFF,
-      f03: #FFFFFF,
-      f04: #FFFFFF,
-      iconDefault: #FFFFFF,
-      iconSelected: #35C6FF,
-      line: #FFFFFF,
-      mention: #FFA43B,
-      menuBg: #35C6FF,
-      menuText: #000000
-    ),
-    neutral: (
-      b01: #000000,
-      b02: #000000,
-      b03: #000000,
-      b04: #FFFFFF,
-      b05: #FFFFFF,
-      b06: #000000,
-      elevation: #000000,
-      f01: #000000,
-      f02: #808080,
-      f03: #FFFFFF,
-      f04: #FFFFFF,
-      f05: #FFFFFF,
-      f06: #FFFFFF,
-      f07: #000000,
-      f11: #FFFFFF,
-      l01: #000000,
-      l02: #FFFFFF,
-      l03: #FFFFFF,
-      l04: #FFFFFF,
-      transparent: transparent
-    ),
-    presence: (
-      available: #7FFF5D,
-      busy: #FF827A,
-      invisible: #808080
-    ),
-    primary: (
-      main: #35C6FF
-    ),
-    secondary: (
-      main: #884C12
-    ),
-    subAction: #35C6FF,
-    success: (
-      b01: #1C281B,
-      b02: #223221,
-      b03: #7FFF5D,
-      b04: #7FFF5D,
-      b05: #FFFFFF,
-      f01: #223221,
-      f02: #7FFF5D,
-      f11: #7FFF5D,
-      main: #3D9A4A
-    ),
-    tab: (
-      default: #FFFFFF,
-      selected: #35C6FF
-    ),
-    type: dark,
-    umi: (
-      bg: #FFFFFF,
-      mentioned: #FFA43B,
-      text: #000000
-    ),
-    vDanger: (
-      f01: #DD6057
-    ),
-    vDisabled: (
-      f01: #54565E
-    ),
-    vNeutral: (
-      b01: #1e2027,
-      b02: #282A32,
-      b03: #30323A,
-      b04: #383A43,
-      f01: #FFFFFF
-    ),
-    warning: (
-      b01: #2B2416,
-      b02: #373D1B,
-      b03: #FEFF05,
-      f01: #FEFF05,
-      f02: #FEFF05,
-      f11: #FEFF05,
-      main: #74561D
-    )
-  )
-);

package/scss/_theming.scss

@@ -1,241 +0,0 @@
-@import './themes/index';
-@import './utils/index';
-
-// that palette will be a global variable, you can use set-palette
-$rc-light-palette: $rc-palette-light-variable !global;
-
-$rc-dark-palette: $rc-palette-dark-variable !global;
-
-// default is light
-$rc-current-palette: $rc-light-palette !global;
-
-/// Set custom palette color
-/// @param {Map} $custom-light-theme - custom light palette map
-/// @param {Map} $custom-dark-theme - custom dark palette map
-@mixin custom-rc-palette($custom-light-theme, $custom-dark-theme) {
-  $rc-light-palette: map-deep-merge(
-    $rc-light-palette,
-    $custom-light-theme
-  ) !global;
-  $rc-dark-palette: map-deep-merge(
-    $rc-dark-palette,
-    $custom-dark-theme
-  ) !global;
-  // reset current to light
-  $rc-current-palette: $rc-light-palette !global;
-}
-
-/**
-  let user can use this to get both theme color
-  Example:
-  @include with-rc-theme() {
-    .root {
-      color: rc-palette('interactive', 'f01');
-    }
-  }
-
-  result will be =>
-
-  [light] .root {
-    color: #4475FD
-  }
-
-  [dark] .root {
-    color: #729AFF
-  }
-*/
-@mixin with-rc-theme() {
-  $tmp: map-merge((), $rc-current-palette);
-  /*
-  this name is so long, is because this variable will global to the scss, must be unique,
-  otherwise it will cause duplicate problem
-  */
-  $rc-current-palette: $rc-light-palette !global;
-
-  [light] {
-    @content;
-  }
-
-  $rc-current-palette: $rc-dark-palette !global;
-
-  [dark] {
-    @content;
-  }
-
-  $rc-current-palette: $tmp !global;
-}
-
-@mixin switchTheme($type) {
-  $tmp: map-merge((), $rc-current-palette);
-
-  @if $type== 'light' {
-    $rc-current-palette: $rc-light-palette !global;
-  } @else if $type== 'dark' {
-    $rc-current-palette: $rc-dark-palette !global;
-  }
-
-  @content;
-
-  $rc-current-palette: $tmp !global;
-}
-
-/**
-  let user can use this to get target theme color
-  Example:
-  @include with-theme-type('light') {
-    .root {
-      color: rc-palette('interactive', 'f01');
-    }
-  }
-
-  result will be =>
-
-  [light] .root {
-    color: #4475FD
-  }
-*/
-@mixin with-rc-theme-type($type) {
-  @include switchTheme($type) {
-    [#{$type}] {
-      @content;
-    }
-  }
-}
-
-/**
-  generate static style with rc like rc-bg-primary-200
-*/
-@mixin generate-rc-static-style($type) {
-  @include switchTheme($type) {
-    @include add-style('rc-bg', 'background-color', $rc-current-palette);
-    @include add-style('rc-text', 'color', $rc-current-palette);
-    @include add-style('rc-border', 'border-color', $rc-current-palette);
-  }
-}
-
-/** get opacity from theme token */
-@function rc-opacity($value) {
-  @return map-get($rc-opacity-variable, $value);
-}
-
-/** get breakpoint from theme token */
-@function rc-breakpoints($value) {
-  @return #{map-deep-get($rc-breakpoints-variable, 'value', $value)}px;
-}
-
-/** get shape from theme token */
-@function rc-shape($value) {
-  @return map-get($rc-shape-variable, $value);
-}
-
-/** append typography style from theme token */
-@mixin rc-typography($value) {
-  $typography: map-get($rc-typography-variable, $value);
-
-  font-size: map-get($typography, 'fontSize');
-  font-weight: map-get($typography, 'fontWeight');
-  line-height: map-get($typography, 'lineHeight');
-
-  @if map-has-key($typography, 'textTransform') {
-    text-transform: map-get($typography, 'textTransform');
-  }
-}
-
-/** append zIndex style from theme token */
-@mixin rc-zIndex($value) {
-  $index: map-get($rc-zIndex-variable, $value);
-  z-index: $index;
-}
-
-/** append border-radius style from theme token */
-@mixin rc-radius($value) {
-  $radius: map-get($rc-radius-variable, $value);
-  border-radius: $radius;
-}
-
-@mixin rc-shadow($value) {
-  // * that nth begin from 1, so +1
-  $shadow: nth($rc-shadows-variable, $value + 1);
-  @include box-shadow($shadow);
-}
-
-/** get palette from theme token */
-@function rc-palette($values...) {
-  @return map-deep-get($rc-current-palette, $values...);
-}
-
-$rc-unit: 4;
-
-/** append spacing style from theme token */
-@function rc-spacing($values...) {
-  $list: ();
-
-  @each $value in $values {
-    $list: append($list, #{$value * $rc-unit}px);
-  }
-
-  @return $list;
-}
-
-@mixin add-rc-shadow($values) {
-  @for $i from 0 through length($rc-shadows-variable) - 1 {
-    .rc-shadow-#{$i} {
-      @include rc-shadow($i);
-    }
-  }
-}
-
-@mixin add-rc-typography($values...) {
-  @each $value in $values {
-    .rc-typography-#{$value} {
-      @include rc-typography($value);
-    }
-  }
-}
-
-/**
-  default rc utils class
-*/
-@mixin rc-utilities {
-  @include add-style('rc-opacity', 'opacity', $rc-opacity-variable);
-  @include add-style('rc-zIndex', 'z-index', $rc-zIndex-variable);
-  @include add-style('rc-radius', 'border-radius', $rc-radius-variable);
-  @include add-rc-shadow($rc-shadows-variable);
-
-  @include add-rc-typography(
-    'display4',
-    'display3',
-    'display2',
-    'display1',
-    'headline1',
-    'headline2',
-    'title2',
-    'title1',
-    'subheading2',
-    'subheading1',
-    'body2',
-    'body1',
-    'caption2',
-    'caption1'
-  );
-
-  // margin
-  @include add-rc-spacing(5, $rc-unit, 'm');
-  // padding
-  @include add-rc-spacing(5, $rc-unit, 'p');
-}
-
-/**
-  include all rc class
-*/
-@mixin rc-core() {
-  @include with-rc-theme-type('light') {
-    @include generate-rc-static-style('light');
-  }
-
-  @include with-rc-theme-type('dark') {
-    @include generate-rc-static-style('dark');
-  }
-
-  @include rc-utilities();
-}

package/scss/themes/_breakpoints.scss

@@ -1,10 +0,0 @@
-$rc-breakpoints-variable: (
-  keys: (xs, sm, md, lg, xl),
-  values: (
-    xs: 0,
-    sm: 641,
-    md: 960,
-    lg: 1280,
-    xl: 1920
-  )
-);

package/scss/themes/_index.scss

@@ -1,10 +0,0 @@
-@import './breakpoints';
-@import './opacity';
-@import './palette.dark';
-@import './palette.light';
-@import './radius';
-@import './shadows';
-@import './shape';
-@import './transition';
-@import './typography';
-@import './zIndex';

package/scss/themes/_opacity.scss

@@ -1,15 +0,0 @@
-$rc-opacity-variable: (
-  '12': 0.12,
-  '16': 0.16,
-  '24': 0.24,
-  '32': 0.32,
-  '40': 0.4,
-  '48': 0.48,
-  '56': 0.56,
-  '64': 0.64,
-  '72': 0.72,
-  '80': 0.8,
-  '88': 0.88,
-  '96': 0.96,
-  '08': 0.08
-);

package/scss/themes/_palette.dark.scss

@@ -1,196 +0,0 @@
-$rc-palette-dark-variable: (
-  action: (
-    grayDark: #FFFFFF,
-    grayLight: #A0A2A9,
-    primary: #729AFF
-  ),
-  avatar: (
-    ash: #666666,
-    blueberry: #5A5ABF,
-    brass: #8E6B2B,
-    global: #6990FD,
-    gold: #7A7000,
-    lake: #1A70C1,
-    oasis: #04549F,
-    pear: #3C7E44,
-    persimmon: #A14B00,
-    sage: #047C68,
-    tomato: #C93637
-  ),
-  content: (
-    brand: #729AFF
-  ),
-  danger: (
-    b01: #391D19,
-    b02: #49241F,
-    b03: #D53C32,
-    b04: #D53C32,
-    f01: #49241F,
-    f02: #E68B85,
-    f11: #E68B85
-  ),
-  dialHeader: (
-    avatarBg: #6990FD,
-    avatarIcon: #FFFFFF,
-    bg: #383A43,
-    focusBorder: #729AFF,
-    icon: #FFFFFF,
-    text: #FFFFFF,
-    textHint: #898B94
-  ),
-  disabled: (
-    b01: #44464E,
-    f01: #72747E,
-    f02: #54565E
-  ),
-  error: (
-    main: #DD6057
-  ),
-  header: (
-    bgLeft: #30323A,
-    bgOverlay: rgba(137,139,148,0.16),
-    bgOverlayDisabled: rgba(137,139,148,0.08),
-    bgRight: #30323A,
-    border: transparent,
-    divider: rgba(0,0,0,0.12),
-    fabBg: #282A32,
-    fabIcon: #FFFFFF,
-    focusBorder: #FFFFFF,
-    icon: #FFFFFF,
-    iconDisabled: rgba(255,255,255,0.32),
-    text: #FFFFFF,
-    textHint: #898B94
-  ),
-  highContrast: transparent,
-  highlight: (
-    b01: #FFFFFF,
-    b02: #3E2A19,
-    b03: #884C12,
-    f01: #FF8800,
-    f02: #FF8800
-  ),
-  info: (
-    main: #A0A2A9
-  ),
-  informative: (
-    b01: #282A32,
-    f01: #222E49,
-    f02: #729AFF
-  ),
-  interactive: (
-    b01: #29334C,
-    b02: #356AFD,
-    f01: #729AFF
-  ),
-  label: (
-    black02: #FFFFFF,
-    blue01: #729AFF,
-    blue02: #729AFF,
-    green01: #72B375,
-    green02: #72B375,
-    orange01: #FF8800,
-    orange02: #FF8800,
-    purple01: #A89CD6,
-    purple02: #A89CD6,
-    red01: #E68B85,
-    red02: #E68B85,
-    teal01: #71ADBA,
-    teal02: #71ADBA,
-    yellow01: #D99F26,
-    yellow02: #D99F26
-  ),
-  nav: (
-    b01: #1e2027,
-    b02: #282A32,
-    bookmark: #729AFF,
-    ctlDefault: #72747E,
-    ctlSelected: #729AFF,
-    f01: #898B94,
-    f02: #A0A2A9,
-    f03: #BCBDC2,
-    f04: #FFFFFF,
-    iconDefault: #FFFFFF,
-    iconSelected: #729AFF,
-    line: #383A43,
-    mention: #FF8800,
-    menuBg: #356AFD,
-    menuText: #FFFFFF
-  ),
-  neutral: (
-    b01: #1e2027,
-    b02: #30323A,
-    b03: #383A43,
-    b04: #72747E,
-    b05: #72747E,
-    b06: #1e2027,
-    elevation: #282A32,
-    f01: #FFFFFF,
-    f02: #72747E,
-    f03: #898B94,
-    f04: #A0A2A9,
-    f05: #BCBDC2,
-    f06: #FFFFFF,
-    f07: #1e2027,
-    f11: #FFFFFF,
-    l01: #1e2027,
-    l02: #383A43,
-    l03: #54565E,
-    l04: #A0A2A9,
-    transparent: transparent
-  ),
-  presence: (
-    available: #3D9A4A,
-    busy: #DD6057,
-    invisible: #72747E
-  ),
-  primary: (
-    main: #356AFD
-  ),
-  secondary: (
-    main: #884C12
-  ),
-  subAction: #729AFF,
-  success: (
-    b01: #1C281B,
-    b02: #223221,
-    b03: #368440,
-    b04: #368440,
-    b05: #A0A2A9,
-    f01: #223221,
-    f02: #72B375,
-    f11: #72B375,
-    main: #3D9A4A
-  ),
-  tab: (
-    default: #FFFFFF,
-    selected: #729AFF
-  ),
-  type: dark,
-  umi: (
-    bg: #72747E,
-    mentioned: #FF8800,
-    text: #FFFFFF
-  ),
-  vDanger: (
-    f01: #DD6057
-  ),
-  vDisabled: (
-    f01: #54565E
-  ),
-  vNeutral: (
-    b01: #1e2027,
-    b02: #282A32,
-    b03: #30323A,
-    b04: #383A43,
-    f01: #FFFFFF
-  ),
-  warning: (
-    b01: #2B2416,
-    b02: #373D1B,
-    b03: #D99F26,
-    f01: #D99F26,
-    f02: #D99F26,
-    f11: #D99F26,
-    main: #74561D
-  )
-);