colors.scss

/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@use "sass:color";

$pebble-black: #111;
$pebble-blue: #16b5d8;
$pebble-blue-alt: color.adjust(#16b5d8, $lightness: -20%, $space: hsl);
$pebble-gray: #959fa0;
$pebble-green: #aed70d;
$pebble-orange: #f57216;
$pebble-pink: #ff568a;
$pebble-red: #b93231;
$pebble-silver: #bdc3c7;

$header-orange: #ef6725;

$white: #fff;
$breakfast-room-white: #FFFFF0;
$black: #000;
$green: #00a94b;
$blue: #16aee5;
$red: #ff1200;
$dark-grey: #444;
$darker-grey: #333;
$pink: #d84ba1;
$yellow: #e5e327;
$mustard-yellow: #f5d04c;
$purple: #9d49d5;
$orange: #e59a25;
$orange-02: #e27c3f;
$lightblue: #4cafe2;
$darkerlightblue: #4c96e2;
$dark-red: #d55248;
$dark-blue: #3f94c0;
$turquoise: #35a2b2;
$android-green: #A4C739;

$bigbox--blue: $lightblue;
$bigbox--green: #22a048;
$bigbox--darkgreen: color.adjust($bigbox--green, $lightness: -20%, $space: hsl);
$bigbox--dark-blue: color.adjust($darkerlightblue, $lightness: -20%, $space: hsl);

$gray-01: #f4f4f4;
$gray-02: #eee;
$gray-03: #e5e4e4;
$gray-04: #d9d9d9;
$gray-05: #bebebe;
$gray-06: #beef69;
$gray-07: #666;
$gray-08: #444;
$gray-09: #272822;
$gray-10: #12130f;

$bigbox--blue: $lightblue;
$bigbox--green: #22a048;

$color-guides: $yellow;
$color-docs: $pink;
$color-community: $purple;
$color-more: $green;
$color-getting-started: $dark-red;
$color-sdk: $lightblue;
$color-appstore: $gray-08;
$color-other: $dark-grey;
$color-blog: $orange-02;
$color-examples: #2c67ce;
$color-devportal: #00c3fd;

$modifier-color-names: 'guides', 'docs', 'community', 'more', 'getting-started',
                       'sdk', 'appstore', 'blog';

$modifier-colors: $color-guides, $color-docs, $color-community, $color-more,
                  $color-getting-started, $color-sdk, $color-appstore,
                  $color-blog;

$modifier-colors-fg: $white $white $white $white $white $white $white $white;

@media all {
  :root {
    /* Dark Mode Support */
    color-scheme: light dark;

    --dev-bg-primary: #{$gray-01};
    --dev-bg-secondary: #{$white};
    --dev-bg-tertiary: #{$gray-03};
    --dev-bg-prominent: #{$gray-02};
    --dev-fg-primary: #{$gray-08};
    --dev-fg-secondary: #{$gray-07};
    --dev-fg-tertiary: #{$gray-09};
    --dev-fg-muted: #{$gray-05};
    --dev-border-primary: #{$gray-04};
    --dev-border-secondary: #{$gray-03};
    --dev-border-tertiary: #{$gray-05};
    --dev-link: #{$pebble-blue};
    --dev-link-hover: #{$pebble-blue-alt};
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --dev-bg-primary: #{$gray-10};
    --dev-bg-secondary: #{$gray-09};
    --dev-bg-tertiary: #{$black};
    --dev-bg-prominent: #{$gray-08};
    --dev-fg-primary: #{$white};
    --dev-fg-secondary: #{$breakfast-room-white};
    --dev-fg-tertiary: #{$gray-01};
    --dev-border-primary: #{$black};
    --dev-border-secondary: #{$gray-10};
    --dev-border-tertiary: #{$gray-09};
    --dev-link: #{color.adjust(#16b5d8, $lightness: 20%, $space: hsl)};
    --dev-link-hover: #{$pebble-blue};
  }
}