Import the pebble dev site into devsite/

devsite/source/_sass/elements/highlight.scss

@@ -0,0 +1,297 @@
+/**
+ * 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.
+ */
+
+.highlight {
+  background-color: $gray-07;
+  border-radius: $base-border-radius;
+  color: #f8f8f2;
+  font: 13px/1.3em $monospace;
+  margin: 0 0 0.75em;
+  padding: 10px;
+  position: relative;
+
+  @include bp-max (xs) {
+    font-size: 12px;
+  }
+
+  &.squished {
+    border-radius: 0;
+    margin: 0;
+  }
+
+  pre {
+    margin: 0;
+    overflow-x: auto;
+  }
+
+  .code-copy-link {
+    background-color: $turquoise;
+    border-radius: $base-border-radius;
+    color: $white;
+    opacity: 0.1;
+    padding: 0.3em 0.3em 0.3em 0.35em;
+    position: absolute;
+    right: 0.4em;
+    top: 0.4em;
+    transition: opacity 0.2s;
+
+    &.zeroclipboard-is-hover {
+      opacity: 1;
+    }
+    
+    span {
+      display: inline-block;
+      margin-right: 0.5em;
+    }
+  }
+
+  &:hover {
+    .code-copy-link {
+      opacity: 1;
+    }
+  }
+
+  // Error
+  .err {
+    background-color: #1e0010;
+    color: #960050;
+  }
+
+  // Keyword
+  .k {
+    color: #66d9ef;
+  }
+
+  // Literal
+  .l {
+    color: #ae81ff;
+  }
+
+  // Name
+  .n {
+    color: #f8f8f2;
+  }
+
+  // Operator
+  .o {
+    color: #f92672;
+  }
+
+  // Punctuation
+  .p {
+    color: #f8f8f2;
+  }
+
+  // Comment.Multiline
+  // Comment.Preproc
+  // Comment.Single
+  // Comment.Special
+  // Comment
+  .c,
+  .cm,
+  .cp,
+  .c1,
+  .cs {
+    color: #e4b21f;
+    font-weight: 600;
+  }
+
+  // Generic.Emph
+  .ge {
+    font-style: italic;
+  }
+
+  // Generic.Strong
+  .gs {
+    font-weight: bold;
+  }
+
+  // Keyword.Constant
+  // Keyword.Declaration
+  .kc,
+  .kd {
+    color: #66d9ef;
+  }
+
+  // Keyword.Namespace
+  .kn {
+    color: #f92672;
+  }
+
+  // Keyword.Pseudo
+  // Keyword.Reserved
+  // Keyword.Type
+  .kp,
+  .kr,
+  .kt {
+    color: #66d9ef;
+  }
+
+  // Literal.Date
+  .ld {
+    color: #e6db74;
+  }
+
+  // Literal.Number
+  .m {
+    color: #ae81ff;
+  }
+
+  // Literal.String
+  .s {
+    color: #e6db74;
+  }
+
+  // Name.Attribute
+  .na {
+    color: #a6e22e;
+  }
+
+  // Name.Builtin
+  .nb {
+    color: #f8f8f2;
+  }
+
+  // Name.Class
+  .nc {
+    color: #a6e22e;
+  }
+
+  // Name.Constant
+  .no {
+    color: #66d9ef;
+  }
+
+  // Name.Decorator
+  .nd {
+    color: #a6e22e;
+  }
+
+  // Name.Entity
+  .ni {
+    color: #f8f8f2;
+  }
+
+  // Name.Exception
+  // Name.Function
+  .ne,
+  .nf {
+    color: #a6e22e;
+  }
+
+  // Name.Label
+  // Name.Namespace
+  .nl,
+  .nn {
+    color: #f8f8f2;
+  }
+
+  // Name.Other
+  .nx {
+    color: #a6e22e;
+  }
+
+  // Name.Property
+  .py {
+    color: #f8f8f2;
+  }
+
+  // Name.Tag
+  .nt {
+    color: #f92672;
+  }
+
+  // Name.Variable
+  .nv {
+    color: #f8f8f2;
+  }
+
+  // Operator.Word
+  .ow {
+    color: #f92672;
+  }
+
+  // Text.Whitespace
+  .w {
+    color: #f8f8f2;
+  }
+
+  // Literal.Number.Float
+  // Literal.Number.Hex
+  // Literal.Number.Integer
+  // Literal.Number.Oct
+  .mf,
+  .mh,
+  .mi,
+  .mo {
+    color: #ae81ff;
+  }
+
+  // Literal.String.Backtick
+  // Literal.String.Char
+  // Literal.String.Doc
+  // Literal.String.Double
+  .sb,
+  .sc,
+  .sd,
+  .s2 {
+    color: #e6db74;
+  }
+
+  // Literal.String.Escape
+  .se {
+    color: #ae81ff;
+  }
+
+  // Literal.String.Heredoc
+  // Literal.String.Interpol
+  // Literal.String.Other
+  // Literal.String.Regex
+  // Literal.String.Single
+  // Literal.String.Symbol
+  .sh,
+  .si,
+  .sx,
+  .sr,
+  .s1,
+  .ss {
+    color: #e6db74;
+  }
+
+  // Name.Builtin.Pseudo
+  // Name.Variable.Class
+  // Name.Variable.Global
+  // Name.Variable.Instance
+  .bp,
+  .vc,
+  .vg,
+  .vi {
+    color: #f8f8f2;
+  }
+
+  // Literal.Number.Integer.Long
+  .il {
+    color: #ae81ff;
+  }
+}
+
+.modal-content .highlight {
+  position: relative;
+}
+
+.highlight--large {
+  font: 15px/1.3em $monospace;
+}