chore: clean css variables (#1227)

* chore: clean css variables

* chore: update sphinx-autobuild

* chore: update sphinx-autobuild

Author: dgarcia360

docs/_utils/pyproject_template.toml

@@ -9,7 +9,7 @@ python = "^3.10"
 pygments = "^2.18.0"
 sphinx-scylladb-theme = "^1.6.1"
 myst-parser = "^3.0.1"
-sphinx-autobuild = "^2024.4.16"
+sphinx-autobuild = "^2024.4.19"
 Sphinx = "^7.3.7"
 sphinx-multiversion-scylla = "^0.3.1"
 sphinx-sitemap = "^2.6.0"

docs/source/examples/code-blocks.rst

@@ -36,6 +36,29 @@ You can create code-blocks in any of the following `languages <https://pygments.
 
 If you are including a large example (an entire file) as a code-block, refer to :doc:`Literal Include <includes>`.
 
+Show line number
+----------------
+
+To show the line number, add the option `:linenos:` to the code-block directive.
+
+For example:
+
+.. code-block:: rst
+
+   .. code-block:: rst
+      :linenos:
+
+      Line 1
+      Line 2
+
+Renders:
+
+.. code-block:: rst
+   :linenos:
+   
+   Line 1
+   Line 2
+
 Hide copy button
 ----------------
 

docs/source/upgrade/1-7-to-1-8.rst

@@ -69,7 +69,7 @@ Steps to apply this change:
         pygments = "^2.18.0"
         sphinx-scylladb-theme = "^1.6.1"
         myst-parser = "^3.0.1"
-        sphinx-autobuild = "^2024.4.16"
+        sphinx-autobuild = "^2024.4.19"
         Sphinx = "^7.3.7"
         sphinx-multiversion-scylla = "^0.3.1"
         sphinx-sitemap = "^2.6.0"

poetry.lock

@@ -19,8 +19,7 @@ setuptools = ">=70.1.1,<75.0.0"
 
 [tool.poetry.dev-dependencies]
 pytest = "^8.3.2"
-# See https://github.com/sphinx-doc/sphinx-autobuild/issues/177
-sphinx-autobuild = "2024.4.16"
+sphinx-autobuild = "^2024.4.19"
 pre-commit = "^3.7.1"
 myst-parser = "^3.0.1"
 sphinx-multiversion-scylla = "^0.3.2"

pyproject.toml

@@ -1,3 +1,4 @@
-@import "variables/index";
+@import "fonticon";
+@import "variables";
 @import "mixins";
 @import "reset";

sphinx_scylladb_theme/static/css/main.css

@@ -1,7 +1,7 @@
 @mixin floating {
-  background: var(--color-white);
+  background: var(--white);
   border: 0;
-  border-radius: $round;
+  border-radius: $border-radius-md;
   box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.15);
   overflow: hidden;
 }

src/css/base/_index.scss

@@ -4,7 +4,7 @@ html {
 }
 
 body {
-  font-size: $font-base;
+  font-size: $font-md;
   font-family: $font-base-family;
   line-height: 1;
   background-color: var(--bg-color);
@@ -22,8 +22,8 @@ a {
 }
 
 a.reference:after {
+  font-size: $font-xs;
   font-family: $font-icons-family;
-  font-size: $font-smallest;
   padding: 0 4px;
 }
 
@@ -46,7 +46,7 @@ a:hover {
 }
 
 .toc-backref:hover {
-  color: var(--color-typography-base);
+  color: var(--black);
 }
 
 h1,

src/css/base/_mixins.scss

@@ -48,6 +48,38 @@ $border-width: 1px;
 $border-radius: $spacer-3xs; 
 $border-radius-md: $spacer-xxs; 
 
+$gap: 30px;
+$footer-height: 180px;
+$header-height: 50px;
+$promo-banner-height: 42.5px;
+$promo-banner-height-large: 70px;
+$header-height-large: 80px;
+$max-content-width: 1440px;
+$max-footer-width: 1030px;
+$max-full-width: 1190px;
+$promo-banner-header-height: $promo-banner-height + $header-height;
+$promo-banner-header-height-large: $promo-banner-height-large + $header-height-large;
+$search-box-width: 318px;
+$secondary-side-nav-width: 286px;
+$side-nav-width: 357px;
+$side-nav-width-collapsed: 126px;
+
+
+// Breakpoint variables
+$small: 0px;
+$medium: 640px;
+$large: 1024px;
+$xlarge: 1200px;
+$xxlarge: 1440px;
+
+// Font variables
+$font-base-family: "Roboto", sans-serif;
+$font-icons-family: "FontAwesome";
+
+$font-md: 16px;
+$font-sm: 14px;
+$font-xs: 12px;
+
 :root {
     --white: #{$white};
     --gray-50: #{$gray-50};
@@ -84,13 +116,16 @@ $border-radius-md: $spacer-xxs;
     --navigation-bg: #{$navigation-bg};
     --card-bg: var(--white);
     --admonition: #{$admonition};
+    --scollbar-bg: #b3bac5;
+    --tooltip-bg : #{$gray-900};
 
     --shadow-lg: 0px 4px 25px rgba(0, 0, 0, 0.15);
     --border-width: #{$border-width};
     --border-radius: #{$border-radius};
     --border-radius-md: #{$border-radius-md};
-
+    --line-number: #5a7184;
     --logo-url: "../img/logo-scylla-horizontal-color.svg";
+
   }
 
   .dark {

src/css/base/_reset.scss

@@ -4,7 +4,7 @@
   border-radius: 4px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
   color: var(--text-muted);
-  font-size: $font-small;
+  font-size: $font-sm;
   line-height: 20px;
   margin-bottom: $gap;
   overflow: auto;

src/css/base/_variables.scss

@@ -7,7 +7,7 @@
   a,
   .bread__item:not(.bread__item--last)::after {
     color: var(--text-color);
-    font-size: $font-smallest;
+    font-size: $font-xs;
     font-weight: 400;
     letter-spacing: 1.5px;
     line-height: 2;

src/css/base/variables/_breakpoints.scss

@@ -4,7 +4,7 @@
   border-radius: 4px;
   color: var(--text-color);
   display: inline;
-  font-size: $font-small;
+  font-size: $font-sm;
   letter-spacing: 1px;
   line-height: 21px;
   padding: 12px 14px;

src/css/base/variables/_colors.scss

@@ -3,7 +3,7 @@ code {
   background-color: var(--well-bg);
   border: none;
   border-radius: 4px;
-  font-size: $font-small;
+  font-size: $font-sm;
 
   &.download {
     background: none;
@@ -16,9 +16,9 @@ code {
 
   pre {
     background-color: var(--well-bg);
-    border-radius: $round;
+    border-radius: $border-radius-md;
     color: var(--code-color);
-    font-size: $font-small;
+    font-size: $font-sm;
     line-height: 26px;
     margin-bottom: $gap;
     overflow: auto;
@@ -50,8 +50,8 @@ code {
   }
 
   .linenos {
-    color: var(--color-typography-code-line-number);
-    background-color: var(--color-background-code);
+    color: var(--line-number);
+    background-color: var(--well-bg);
     width: 50px;
 
     span {

src/css/base/variables/_index.scss

@@ -16,7 +16,7 @@
   &__title {
     color: var(--text-color);
     font-weight: 500;
-    font-size: $font-smallest;
+    font-size: $font-xs;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     line-height: 24px;

src/css/base/variables/_measuraments.scss

@@ -3,7 +3,7 @@
   margin-bottom: 20px;
 
   &__item {
-    font-size: $font-small;
+    font-size: $font-sm;
     padding-bottom: 10px;
     list-style: none;