@digigov/theme-grnet 2.0.0-rc.21

package/dist/variables.css

@@ -0,0 +1,688 @@
+:root {
+  --text-sm-default: 0.875rem;
+  --text-base-default: 1rem;
+  --text-lg-default: 1.1875rem;
+  --text-xl-default: 1.25rem;
+  --text-2xl-default: 1.5rem;
+  --text-3xl-default: 1.875rem;
+  --text-4xl-default: 2.25rem;
+  --text-5xl-default: 3rem;
+
+  --text-sm-large: 1rem;
+  --text-base-large: 1.25rem;
+  --text-lg-large: 1.4rem;
+  --text-xl-large: 1.6rem;
+  --text-2xl-large: 1.875rem;
+  --text-3xl-large: 2.25rem;
+  --text-4xl-large: 2.5rem;
+  --text-5xl-large: 3rem;
+
+  --text-sm: var(--text-sm-default);
+  --text-base: var(--text-base-default);
+  --text-lg: var(--text-lg-default);
+  --text-xl: var(--text-xl-default);
+  --text-2xl: var(--text-2xl-default);
+  --text-3xl: var(--text-3xl-default);
+  --text-4xl: var(--text-4xl-default);
+  --text-5xl: var(--text-5xl-default);
+
+  --line-h-sm-default: 1.375;
+  --line-h-base-default: 1.375;
+  --line-h-lg-default: 1.375;
+  --line-h-xl-default: 1.25;
+  --line-h-2xl-default: 1.25;
+  --line-h-3xl-default: 1.25;
+  --line-h-4xl-default: 1.25;
+  --line-h-5xl-default: 1.25;
+
+  --line-h-sm-large: 2;
+  --line-h-base-large: 2;
+  --line-h-lg-large: 2;
+  --line-h-xl-large: 1.75;
+  --line-h-2xl-large: 1.75;
+  --line-h-3xl-large: 1.5;
+  --line-h-4xl-large: 1.5;
+  --line-h-5xl-large: 1.25;
+
+  --line-h-sm: var(--line-h-sm-default);
+  --line-h-base: var(--line-h-base-default);
+  --line-h-lg: var(--line-h-lg-default);
+  --line-h-xl: var(--line-h-xl-default);
+  --line-h-2xl: var(--line-h-2xl-default);
+  --line-h-3xl: var(--line-h-3xl-default);
+  --line-h-4xl: var(--line-h-4xl-default);
+  --line-h-5xl: var(--line-h-5xl-default);
+
+  --letter-spacing-normal-default: normal;
+  --letter-spacing-wide-default: 0.025rem;
+  --letter-spacing-wider-default: 0.05rem;
+  --letter-spacing-widest-default: 0.075rem;
+
+  --letter-spacing-normal-extra: 0.05rem;
+  --letter-spacing-wide-extra: 0.075rem;
+  --letter-spacing-wider-extra: 0.01rem;
+  --letter-spacing-widest-extra: 0.125rem;
+
+  --letter-spacing-normal: var(--letter-spacing-normal-default);
+  --letter-spacing-wide: var(--letter-spacing-wide-default);
+  --letter-spacing-wider: var(--letter-spacing-wider-default);
+  --letter-spacing-widest: var(--letter-spacing-widest-default);
+
+  --border-radius-md: 4px;
+  --border-radius-lg: 8px;
+
+  /* TODO: This was not originally defined */
+  --color-footer-link: var(--color-link);
+  --color-footer-link-hover: var(--color-link-hover);
+
+  --color-header-text: var(--black);
+  --color-header-text-hover: var(--black);
+}
+
+.ds-accordion__section-heading {
+  --accordion__section-heading-font-size: var(--text-lg);
+}
+
+@media (min-width: 768px) {
+
+.ds-accordion__section-heading {
+    --accordion__section-heading-font-size: var(--text-xl)
+}
+  }
+
+.ds-accordion__section-summary {
+  --accordion__section-summary-background: var(--color-base-200);
+  --accordion__section-summary-background-hover: var(--color-base-300);
+}
+
+.ds-breadcrumbs__list-item {
+  --breadcrumbs__list-item-font-size: var(--text-sm);
+}
+
+@media (min-width: 768px) {
+
+.ds-breadcrumbs__list-item {
+    --breadcrumbs__list-item-font-size: var(--text-base)
+}
+  }
+
+.ds-back-to-top-link {
+  --back-to-top-link-color: var(--color-link);
+  --back-to-top-link-color-active: var(--color-link-active);
+  --back-to-top-link-color-hover: var(--color-link-hover);
+  --back-to-top-link-padding: 0px;
+  --back-to-top-link-font-size: var(--text-base);
+  --back-to-top-link-line-height: var(--line-h-base);
+  --back-to-top-link-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-back-to-top-link {
+    --back-to-top-link-font-size: var(--text-lg);
+    --back-to-top-link-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-btn {
+  --btn-border-radius: 4px;
+  --btn-padding: 0.5rem 1.25rem;
+  --btn-letter-spacing: var(--letter-spacing-wide);
+  --btn-font-size: var(--text-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-btn {
+    --btn-font-size: var(--text-lg)
+}
+  }
+
+@media print {
+
+.ds-btn {
+    --btn-padding: 0.5rem 1rem
+}
+  }
+
+.ds-btn-cta {
+  --btn-cta-font-size: var(--text-lg);
+}
+
+@media (min-width: 768px) {
+
+.ds-btn-cta {
+    --btn-cta-font-size: var(--text-xl)
+}
+  }
+
+.ds-btn-primary {
+  --btn-primary-background-color: var(--color-primary);
+  --btn-primary-color: var(--color-base-content);
+  --btn-primary-background-color-hover: var(--color-primary-300);
+  --btn-primary-color-hover: var(--color-base-content);
+  --btn-primary-background-color-active: var(--color-primary-300);
+  --btn-primary-box-shadow: 0;
+}
+
+@media print {
+
+.ds-btn-primary {
+    --btn-primary-background-color: var(--color-white);
+    --btn-primary-color: var(--color-base-content)
+}
+  }
+
+.ds-btn-secondary {
+  --btn-secondary-background-color: var(--color-base-300);
+  --btn-secondary-color: var(--color-base-content);
+  --btn-secondary-background-color-hover: var(--color-base-400);
+  --btn-secondary-color-hover: var(--color-base-content);
+  --btn-secondary-background-color-active: var(--color-base-500);
+  --btn-secondary-box-shadow: 0;
+}
+
+@media print {
+
+.ds-btn-secondary {
+    --btn-secondary-background-color: var(--color-white);
+    --btn-secondary-color: var(--color-base-content)
+}
+  }
+
+.ds-btn-warning {
+  --btn-warning-background-color: var(--color-error);
+  --btn-warning-color: var(--color-white);
+  --btn-warning-background-color-hover: var(--color-error-hover);
+  --btn-warning-color-hover: var(--color-white);
+  --btn-warning-background-color-active: var(--color-error-hover);
+  --btn-warning-box-shadow: 0;
+}
+
+@media print {
+
+.ds-btn-warning {
+    --btn-warning-background-color: var(--color-white);
+    --btn-warning-color: var(--color-base-content)
+}
+  }
+
+.ds-card__text {
+  --card__text-font-size: var(--text-base);
+  --card__text-line-height: var(--line-h-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-card__text {
+    --card__text-font-size: var(--text-lg);
+    --card__text-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-card {
+  --card-border-radius: var(--border-radius-lg);
+  --card-background-color: var(--color-base-200);
+  --card-padding: 1.5rem 1rem;
+}
+
+.ds-label {
+  --label-font-size: var(--text-base);
+  --label-line-height: var(--line-h-base);
+  --label-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-label {
+    --label-font-size: var(--text-lg);
+    --label-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-input {
+  --input-border-radius: var(--border-radius-md);
+}
+
+.ds-textarea {
+  --textarea-border-radius: var(--border-radius-md);
+}
+
+.ds-select {
+  --select-border-radius: var(--border-radius-md);
+}
+
+.ds-footer__copyright {
+  --footer__copyright-font-size: var(--text-sm);
+}
+
+@media (min-width: 768px) {
+
+.ds-footer__copyright {
+    --footer__copyright-font-size: var(--text-base)
+}
+  }
+
+.ds-footer {
+  --footer-border: solid var(--color-tertiary);
+  --footer-border-width: 0;
+  --footer-background-color: var(--color-base-900);
+  --footer-color: var(--color-base-200);
+}
+
+.ds-footer__link {
+  --footer__link-text-decoration: none;
+  --footer__link-text-decoration-hover: underline;
+  --footer__link-color-hover: var(--color-base-300);
+  --footer__link-color-focus: var(--color-base-content);
+}
+
+.ds-header {
+  --header-border: solid var(--color-base-300);
+  --header-border-width: 0 0 1px 0;
+  --header-background: var(--color-base-200);
+}
+
+.ds-header__title {
+  --header__title-color: var(--header-color);
+  --header__title-color-hover: var(--header-color-hover);
+}
+
+.ds-warning-text {
+  --warning-text-font-size: var(--text-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-warning-text {
+    --warning-text-font-size: var(--text-lg)
+}
+  }
+
+.ds-details {
+  --details-font-size: var(--text-base);
+  --details-line-height: var(--line-h-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-details {
+    --details-font-size: var(--text-lg);
+    --details-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-details__summary {
+  --details__summary-font-size: var(--text-base);
+  --details__summary-line-height: var(--line-h-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-details__summary {
+    --details__summary-font-size: var(--text-lg);
+    --details__summary-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-details__summary--lg {
+  --details__summary--lg-font-size: var(--text-lg);
+  --details__summary--lg-line-height: var(--line-h-lg);
+}
+
+@media (min-width: 768px) {
+
+.ds-details__summary--lg {
+    --details__summary--lg-font-size: var(--text-xl);
+    --details__summary--lg-line-height: var(--line-h-xl)
+}
+  }
+
+.ds-blockquote {
+  --blockquote-font-size: var(--text-base);
+  --blockquote-line-height: var(--line-h-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-blockquote {
+    --blockquote-font-size: var(--text-lg);
+    --blockquote-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-notification-banner {
+  --notification-banner-border-radius: var(--border-radius-md);
+}
+
+.ds-circular-progress__circle--1 {
+  --circular-progress__circle--1-stroke: var(--color-secondary);
+}
+
+.ds-circular-progress__circle--2 {
+  --circular-progress__circle--2-stroke: var(--color-tertiary);
+}
+
+.ds-tabs__panel {
+  --tabs__panel-border-radius: 0 var(--border-radius-md) var(--border-radius-lg);
+}
+
+.ds-panel {
+  --panel-border-radius: var(--border-radius-md);
+}
+
+.ds-panel__title {
+  --panel__title-font-size: var(--text-4xl);
+  --panel__title-line-height: var(--line-h-4xl);
+  --panel__title-margin-bottom: 1rem;
+  --panel__title-font-weight: 700;
+  --panel__title-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-panel__title {
+    --panel__title-font-size: var(--text-5xl);
+    --panel__title-line-height: var(--line-h-5xl);
+    --panel__title-margin-bottom: 1.5rem
+}
+  }
+
+@media print {
+
+.ds-panel__title {
+    --panel__title-font-size: var(--text-4xl);
+    --panel__title-line-height: var(--line-h-4xl);
+    --panel__title-margin-bottom: 1.5rem
+}
+  }
+
+.ds-panel__body {
+  --panel__body-font-size: var(--text-2xl);
+  --panel__body-line-height: var(--line-h-2xl);
+  --panel__body-margin: auto;
+  --panel__body-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-panel__body {
+    --panel__body-font-size: var(--text-4xl);
+    --panel__body-line-height: var(--line-h-4xl)
+}
+  }
+
+@media print {
+
+.ds-panel__body {
+    --panel__body-font-size: var(--text-2xl);
+    --panel__body-line-height: var(--line-h-2xl)
+}
+  }
+
+.ds-phase-banner__content {
+  --phase-banner__content-font-size: var(--text-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-phase-banner__content {
+    --phase-banner__content-font-size: var(--text-lg)
+}
+  }
+
+.ds-radios__label {
+  --radios__label-font-size: var(--text-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-radios__label {
+    --radios__label-font-size: var(--text-lg)
+}
+  }
+
+.ds-summary-list {
+  --summary-list-font-size: var(--text-base);
+}
+
+@media (min-width: 768px) {
+
+.ds-summary-list {
+    --summary-list-font-size: var(--text-lg)
+}
+  }
+
+.ds-heading-xl {
+  --heading-xl-font-size: var(--text-3xl);
+  --heading-xl-line-height: var(--line-h-3xl);
+  --heading-xl-margin-bottom: 2rem;
+  --heading-xl-font-weight: 700;
+  --heading-xl-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-heading-xl {
+    --heading-xl-font-size: var(--text-5xl);
+    --heading-xl-line-height: var(--line-h-5xl);
+    --heading-xl-margin-bottom: 3rem
+}
+  }
+
+.ds-heading-lg {
+  --heading-lg-font-size: var(--text-2xl);
+  --heading-lg-line-height: var(--line-h-2xl);
+  --heading-lg-margin-bottom: 2rem;
+  --heading-lg-font-weight: 700;
+  --heading-lg-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-heading-lg {
+    --heading-lg-font-size: var(--text-4xl);
+    --heading-lg-line-height: var(--line-h-4xl);
+    --heading-lg-margin-bottom: 2.5rem
+}
+  }
+
+.ds-heading-md {
+  --heading-md-font-size: var(--text-xl);
+  --heading-md-line-height: var(--line-h-xl);
+  --heading-md-margin-bottom: 1.5rem;
+  --heading-md-font-weight: 700;
+  --heading-md-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-heading-md {
+    --heading-md-font-size: var(--text-2xl);
+    --heading-md-line-height: var(--line-h-2xl);
+    --heading-md-margin-bottom: 2rem
+}
+  }
+
+.ds-heading-sm {
+  --heading-sm-font-size: var(--text-base);
+  --heading-sm-line-height: var(--line-h-base);
+  --heading-sm-margin-bottom: 0.75rem;
+  --heading-sm-font-weight: 700;
+  --heading-sm-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-heading-sm {
+    --heading-sm-font-size: var(--text-lg);
+    --heading-sm-line-height: var(--line-h-lg);
+    --heading-sm-margin-bottom: 1.25rem
+}
+  }
+
+.ds-heading-xs {
+  --heading-xs-font-size: var(--text-sm);
+  --heading-xs-line-height: var(--line-h-sm);
+  --heading-xs-margin-bottom: 0.5rem;
+  --heading-xs-font-weight: 700;
+  --heading-xs-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-heading-xs {
+    --heading-xs-font-size: var(--text-base);
+    --heading-xs-line-height: var(--line-h-base);
+    --heading-xs-margin-bottom: 1rem
+}
+  }
+
+.ds-caption-xl {
+  --caption-xl-font-size: var(--text-xl);
+  --caption-xl-line-height: var(--line-h-xl);
+  --caption-xl-margin-bottom: 0.25rem;
+  --caption-xl-color: var(--color-base-800);
+  --caption-xl-font-weight: 400;
+  --caption-xl-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-caption-xl {
+    --caption-xl-font-size: var(--text-2xl);
+    --caption-xl-line-height: var(--line-h-2xl);
+    --caption-xl-margin-bottom: 0.5rem
+}
+  }
+
+.ds-caption-lg {
+  --caption-lg-font-size: var(--text-lg);
+  --caption-lg-line-height: var(--line-h-lg);
+  --caption-lg-margin-bottom: 0rem;
+  --caption-lg-color: var(--color-base-800);
+  --caption-lg-font-weight: 400;
+  --caption-lg-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-caption-lg {
+    --caption-lg-font-size: var(--text-xl);
+    --caption-lg-line-height: var(--line-h-xl)
+}
+  }
+
+.ds-caption-md {
+  --caption-md-font-size: var(--text-base);
+  --caption-md-line-height: var(--line-h-base);
+  --caption-md-margin-bottom: 0rem;
+  --caption-md-color: var(--color-base-800);
+  --caption-md-font-weight: 400;
+  --caption-md-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-caption-md {
+    --caption-md-font-size: var(--text-lg);
+    --caption-md-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-body {
+  --body-font-size: var(--text-base);
+  --body-line-height: var(--line-h-base);
+  --body-margin-bottom: 1rem;
+  --body-color: var(--color-base-content);
+  --body-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-body {
+    --body-font-size: var(--text-lg);
+    --body-line-height: var(--line-h-lg);
+    --body-margin-bottom: 2rem
+}
+  }
+
+.ds-body-lg {
+  --body-lg-font-size: var(--text-lg);
+  --body-lg-line-height: var(--line-h-lg);
+}
+
+.ds-body-sm {
+  --body-sm-font-size: var(--text-sm);
+  --body-sm-line-height: var(--line-h-sm);
+}
+
+.ds-hint {
+  --hint-font-size: var(--text-base);
+  --hint-line-height: var(--line-h-base);
+  --hint-margin-bottom: 1rem;
+  --hint-color: var(--color-base-800);
+  --hint-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-hint {
+    --hint-font-size: var(--text-lg);
+    --hint-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-hint-lg {
+  --hint-lg-font-size: var(--text-lg);
+  --hint-lg-line-height: var(--line-h-lg);
+}
+
+.ds-hint-sm {
+  --hint-sm-font-size: var(--text-sm);
+  --hint-sm-line-height: var(--line-h-sm);
+}
+
+.ds-link {
+  --link-color: var(--color-link);
+  --link-color-active: var(--color-link-active);
+  --link-color-hover: var(--color-link-hover);
+  --link-padding: 0px;
+  --link-font-size: var(--text-base);
+  --link-line-height: var(--line-h-base);
+  --link-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-link {
+    --link-font-size: var(--text-lg);
+    --link-line-height: var(--line-h-lg)
+}
+  }
+
+.ds-back-link {
+  --back-link-font-size: var(--text-base);
+  --back-link-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-back-link {
+    --back-link-font-size: var(--text-lg)
+}
+  }
+
+.ds-list {
+  --list-font-size: var(--text-base);
+  --list-line-height: var(--line-h-base);
+  --list-letter-spacing: var(--letter-spacing-normal);
+}
+
+@media (min-width: 768px) {
+
+.ds-list {
+    --list-font-size: var(--text-lg);
+    --list-line-height: var(--line-h-lg)
+}
+  }

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@digigov/theme-grnet",
+  "version": "2.0.0-rc.21",
+  "description": "Digigov CSS - grnet theme",
+  "author": "GRNET Devs <devs@lists.grnet.gr>",
+  "license": "BSD-2-Clause",
+  "keywords": [
+    "design-system",
+    "tailwindcss",
+    "ui-library",
+    "component",
+    "framework",
+    "tailwind",
+    "theming",
+    "postcss",
+    "design",
+    "css",
+    "ui"
+  ],
+  "main": "dist/index.js",
+  "style": "dist/index.css",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "autoprefixer": "10.4.16",
+    "postcss": "8.4.4",
+    "postcss-cli": "8.3.0",
+    "prejss-cli": "0.3.3",
+    "tailwindcss": "3.3.5",
+    "rimraf": "3.0.2",
+    "publint": "0.1.8",
+    "cssnano": "4.1.10",
+    "postcss-import": "13.0.0",
+    "postcss-sort-media-queries": "5.2.0",
+    "postcss-load-config": "3.1.4",
+    "@digigov/css": "2.0.0-rc.21",
+    "@digigov/cli-app": "1.2.3-rc.21"
+  },
+  "scripts": {
+    "precollect": "postcss ./*.css --base . --dir dist",
+    "collect": "cat dist/*.css > dist/index.css",
+    "postcollect": "prejss-cli dist/index.css --format commonjs --out-dir ./dist",
+    "build": "rimraf dist && npm run collect",
+    "publint": "publint"
+  }
+}